Почему мои ящики не соответствуют друг другу

0

Я создаю сайт для путешествий для своей задачи разграничения колледжа. Я начал, и все идет хорошо, но я застрял в данный момент. У меня в основном есть три коробки, которые предназначены для содержания некоторого письменного контента, но я не могу заставить их сделать их друг другу. Ящики также должны быть встроены в коробку выше. Любая помощь будет оценена, спасибо заранее.

HTML

  <div id="wrapper">
      <div id="top">
         <div class="logo"> </div>
      </div>
      <div id="menu">
         <div class="button"> Home </div>
         <div class="button"> Destinations </div>
         <div class="button"> Make A Booking </div>
         <div class="button"> Things To Do </div>
         <div class="button"> Contact Us </div>
      </div>
      <div id="box">
         content here
      </div>
      <div id="deal_one">
      <div id="deal_two">
      <div id="deal_three">
  </div>

CSS

#wrapper {
    width:80%;
    position:relative;
    margin:0 auto;
}

#top {
    width:100%;
    height:200px;
    background-color:rgba(0,95,160,1);
    border:solid 2px #000;
    position:relative;
}

#menu {
    width:100%;
    height:150px;
    background-color:#fff;
    border:solid 2px #000;
    text-align:center;
    position:relative;
    display:inline-block;
}

#box {
    width:100%;
    min-height:500px;
    background-color:rgba(0,95,160,1);
    margin-top:0;
    border:solid 2px #000;
    position:relative;
}

.button {
    font-family:Verdana, Geneva, sans-serif;
    font-size:15pt;
    display:inline-block;
    margin:4.5% 5% 0;
}

.logo {
    position:relative;
    background-image:url(../Images/Logo%203.png);
    background-size:650px;
    width:500px;
    height:900px;
    top:-30%;
    display:inline-block;
    z-index:500;
    background-repeat:no-repeat;
    margin:0 auto 0 -10%;
}

#deal_one {
    width:320px;
    height:300px;
    background-color:rgba(0,95,160,1);
    border:solid 2px #000;
    margin-top:5%;
    margin-left:.1%;
    position:relative;
}

#deal_two {
    width:320px;
    height:300px;
    background-color:rgba(0,95,160,1);
    border:solid 2px #000;
    margin-top:5%;
    margin-left:116.5%;
    position:relative;
}

#deal_three {
    width:320px;
    height:300px;
    background-color:rgba(0,95,160,1);
    border:solid 2px #000;
    margin-top:5%;
    margin-left:118.8%;
    position:relative;
}

http://jsfiddle.net/pRyzE/

  • 1
    Не могли бы вы определить «в строке» немного конкретнее? И скрипка поможет.
  • 2
    может их отпустить?
Показать ещё 5 комментариев
Теги:

3 ответа

0
Лучший ответ

Вот несколько шагов для завершения ваших работ.

  1. Закройте свой div (все три) правильно.
  2. Возьмите их в контейнер div.
  3. Установите display:inline-block для всех трех разделов.
  4. Установите width каждого блока примерно на 33%, а не на 33%, так как некоторое пространство также берется по марже.
  5. Удалите поле, которое вы предоставили всем div.

HTML

<div id="threeBoxContainer">
    <div id="deal_one"></div>
    <div id="deal_two"></div>
    <div id="deal_three"></div>
</div>

CSS

#threeBoxContainer div {
    display: inline-block;
    background-color: yellow;
}

#deal_one {
    width: 33%;
    height: 300px;
    background-color: rgba(0, 95, 160, 1);
    border: solid 2px black;
    margin-top: 5%;
}

#deal_two {
    width: 32%;
    height: 300px;
    background-color: rgba(0, 95, 160, 1);
    border: solid 2px black;
    margin-top: 5%;
}

#deal_three {
    width: 33%;
    height: 300px;
    background-color: rgba(0, 95, 160, 1);
    border: solid 2px black;
    margin-top: 5%;
}

Демо-версия Js Fiddle

Поделиться
3

Прежде всего: вы должны закрыть свои divs: <div id="deal_one"></div>

Как @GoE уже прокомментировал; лучше их плавать. Также дает вам возможность немного облегчить им работу (когда это необходимо):

HTML:

<div id="deal_one" class="deal"></div>
<div id="deal_two" class="deal"></div>
<div id="deal_two" class="deal"></div>

CSS:

.deal { float: left; width: 30%; margin-right: 5%; }
.deal:last-child { margin-right: 0; }

То, что я здесь делаю, - это плавать по сделкам и устанавливать правильную маржу, чтобы держать их в стороне. Последний div не должен иметь правого края, потому что вы хотите, чтобы он придерживался стороны содержимого, а следовательно :last-child правила :last-child. В скрипке я добавил box-sizing: border-box потому что в противном случае граница добавляется к ширине, и, таким образом, div будет более широким, чем 30%, и приведет к тому, что последний упадет на следующую строку.

скрипка

Поделиться
  • 0
    Вы также можете использовать display:inline-block; http://jsfiddle.net/pRyzE/9/
  • 1
    Я также хотел бы подчеркнуть важность отступа / форматирования кода, поскольку это может помочь предотвратить ошибки, такие как not closing off tags . (Поскольку ваш пример скрипки не закрывает div #wrapper ).
0

Я не могу оставлять комментарии, но кажется, что вам нужно удалить top и добавить float: left до этих трех div. Надеюсь это поможет

Поделиться
  • 0
    Как вы думаете, вы могли бы дать мне процент?
  • 0
    Да, ты можешь. просто добавьте ширину: хх%;

Ещё вопросы

Сообщество Overcoder
Наверх
Меню