我如何讓一個div圍繞另一個div？

Question

我的網站上有3個框需要清除。 這是網站，底部的方框是我想要清除的。 如果有人有任何想法，我很想聽聽他們的想法。

謝謝你的幫助！

范例 | http://www.sevwebdesign.com

我希望它看起來如何：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

我檢查了您發布的網站，發現最后一個信息框未正確對齊，也許您的意思是明確地將這些框正確對齊。

我制造了一個小提琴，但我可能會誤解您的問題，但請檢查一下。

小提琴

我更改了一些標記。 稍后再編輯。

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;
}

這是清除框的意思嗎？ 將它們對准底部？ 希望這可以幫助。