Question

我正在为我的大学区分任务创建一个旅游网站。我已经开始了，它没事，但我现在卡住了。我基本上有三个盒子，意在包含一些书面内容，但我似乎无法让它们互相内联。盒子也必须与上面的盒子一致。任何帮助将不胜感激，谢谢你提前。

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/

Answer 1

首先：你应该关闭你的div：<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规则。在小提琴中，我添加了box-sizing: border-box，因为否则边框会被添加到宽度，因此div将会扩大到30％并且会导致最后一个下降到下一行。

<强> Fiddle

Answer 2

我暂时无法发表评论，但您似乎需要删除top并将float: left添加到这3个div中。希望这有帮助

Answer 3

以下是完成工作的一些步骤。

正确关闭div（全部三个）。
带他们进入一个容器div。
将display:inline-block设置为所有三个div。
将每个区块的width设置为大约33％而不是等于33％，因为边距也占据了一些空间。
删除您给所有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 Demo

为什么我的盒子彼此不一致

3 个答案: