Question

我想在网站上找到3个盒子。这是网站底部的盒子是我想要清楚的。如果有人有任何想法，我很乐意听到他们。

感谢您的帮助！

我希望它看起来如何：www.sevwebdesign.com/graphics/site_layout.jpg

HTML

 <div id="left-info">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            <br><br><br><br><br><br>
            </p>
          </div>
    </div>
    <div id="mid-info">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            <br><br><br><br><br>
            </p>
          </div>
    </div>

    <div id="right-info">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            </p>
          </div>
    </div>

CSS

.info-bar-title{
    color:#fff;
    text-align:center;
    font-family: 'Carrois Gothic', sans-serif;
    font-size:25px;
    margin-top:0px;
    margin-bottom:0px;
}
#left-info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    margin-left:100px;
    float:left;
}
#mid-info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    margin:0px auto;
    align-content:center;

}
#right-info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    margin-right:100px;
    float:right; clear:left;
}
.info-inter {
    color:#000;
    background-color:rgba(255,255,255,1.00);
    border-radius:8px;
    padding:3px;
}
.info-words {
    text-align:center;
}

Answer 1

我检查了你发布的网站，我看到最后一个信息框没有正确对齐，也许清楚你的意思是正确对齐这些框。

我创造了一个小提琴，但我可能会误解你的问题，但要检查一下。

Fiddle

我改变了一些标记。稍后再编辑。

<强> HTML

<div class="info-wrapper">
    <div class="info">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            <br/><br/><br/><br/><br/>
            </p>
          </div>
    </div>
    <div class="info">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **</p>
                <br/><br/><br/><br/><br/>

          </div>
    </div>

    <div class="info">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            </p>
          </div>
    </div>
</div>

<强> CSS

.info-wrapper{
    width:1100px;
}
.info-bar-title{
    color:#fff;
    text-align:center;
    font-family: 'Carrois Gothic', sans-serif;
    font-size:25px;
    margin-top:0px;
    margin-bottom:0px;
}
.info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    float:left;
    margin-right:50px;
}
.info-inter {
    color:#000;
    background-color:rgba(255,255,255,1.00);
    border-radius:8px;
    padding:3px;
}
.info-words {
    text-align:center;
}

Answer 2

对于初学者来说，将这三个框包装在一个div ID（例如页脚）中：我们也将为每个框使用相同的样式，因此我们将重命名页脚框并使用CLASSES，因为页面上有超过1个。

<div id="footer">
<div class="footer-box">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            <br><br><br><br><br><br>
            </p>
          </div>
    </div>
    <div class="footer-box">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            <br><br><br><br><br>
            </p>
          </div>
    </div>

    <div class="footer-box">
        <h1 class="info-bar-title">Facebook Feed</h1>
            <div class="info-inter">
            <p class="info-words">** FACEBOOK FEED **
            </p>
          </div>
    </div>
</div>

现在，您希望将页脚的样式设置为在页面上居中。

#footer{
 width:960px;
 margin:auto;
 padding:0px; //Dont want any extra or inherent padding
}

这是基于您的其他元素宽度为960.

在页脚div中，我们将对齐我们的框。

.footer-box {
background-color: #629B5D;
border: solid 5px #629B5D;
border-radius: 8px;
width: 300px;
margin-left: 20px;
float: left;
}

然后你会发现它们都悬浮在彼此的顶部并且它们都是相同的宽度等。这些层更清洁。

Answer 3

我在JSFIDDLE中尝试了你的代码。

检查此代码：（JSFIDDLE资源：http://jsfiddle.net/qZaEZ/）

#left-info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    margin-left:100px;
    float:left;
}
#mid-info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    margin-left: 50px;
    float:left;

}
#right-info{
    background-color:#629B5D;
    border:solid 5px #629B5D;
    border-radius:8px;
    width:300px;
    margin-right:100px;
    float:right;
}

这是清除盒子的意思吗？将它们对齐在底部？希望这会有所帮助。

我如何让div绕过另一个div？

3 个答案:

Fiddle