無法在包裝中並排放置2個div

Question

我無法在包裝中並排放置2個div。我讀過關於如何並排放置2個div的現有問題和文章;它看起來很簡單，只是定義寬度和浮動：左爲兩個div。但是，我無法讓它工作！

任何幫助將不勝感激，謝謝！ :)

這裏是的jsfiddle：https://jsfiddle.net/Toppoki/7pazLwLs/23/

HTML：

<div class="child1"> 
<div class="wrapper"> 
<div class="blurb"> 
</div> 
<div class="form"> 
</div> 
</div> 
</div> 

CSS：

.child1 { 
background:#082a46; 
margin:0; 
} 

.wrapper { 
width:970px; 
margin: 0 auto; 
} 

.blurb { 
color: #fff; 
width:200px; 
height:400px; 
float:left; 
} 

.form{ 
background-color:#9c0b0e; 
width:100px; 
height:400px; 
float:left; 
} 

Answer 1

它已經爲你工作表現的片段。我只是在div.form上放置了一個背景顏色，這樣你就可以看到。

在你的jsfiddle的例子中，div.blurb缺少float:left，並且有很多東西可以讓你感到困惑。

開始脫掉一些佔位符文本和不必要的元素和樣式。開始製作它非常簡單，縮進它，並且一次添加一個樣式。它最終會工作。

.child1 { 
 
    background:#082a46; 
 
    margin:0; 
 
} 
 

 
.wrapper { 
 
    border: 1px solid #ccc; 
 
    width:970px; 
 
    margin: 0 auto; 
 
} 
 

 
.blurb { 
 
    color: #fff; 
 
    width:200px; 
 
    background-color: blue; 
 
    height:400px; 
 
    float:left; 
 
} 
 

 
.form{ 
 
    background-color:#9c0b0e; 
 
    width:100px; 
 
    height:400px; 
 
    float:left; 
 
}

<div class="child1"> 
 
    <div class="wrapper"> 
 
    <div class="blurb"> 
 
    </div> 
 
    <div class="form"> 
 
    </div> 
 
    </div> 
 
</div>

Answer 2

您也可以通過在兩個div display:inline-block側放置2個div的一面。

（如果你想讓它響應，確定孩子的寬度與%而不是像素）。

.child1 { 
 
    background:#082a46; 
 
} 
 

 
.wrapper { 
 
    border: 1px solid #ccc; 
 
} 
 

 
.blurb { 
 
    color: #fff; 
 
    background-color: blue; 
 
    width:200px; 
 
    height:400px; 
 
    display:inline-block; 
 
} 
 

 
.form{ 
 
    background-color:#9c0b0e; 
 
    width:100px; 
 
    height:400px; 
 
    display:inline-block; 
 
}

<div class="child1"> 
 
    <div class="wrapper"> 
 
    <div class="blurb"></div> 
 
    <div class="form"></div> 
 
    </div> 
 
</div>