需要所有的div出現在同一行

我有一個div項的section1，section2，section3的問題，因爲我需要它們在一行中設置。第3節似乎低於其他兩個。你知道爲什麼這樣嗎？我需要所有人都在同一條線上。需要所有的div出現在同一行

div.bodySection 
{ 
padding:5px; 
background-color:lime; 
margin-left:10px; 
display:inline-block; 
} 

<div id="section"> 

<div id="section1" class="bodySection"> 
<h1><London></h1> 
<p>London is the capital city of England.</p> 
</div> 

<div id="section2" class="bodySection"> 
<h2><London></h2> 
<p1>London is the capital city of England.</p> 
</div> 

<div id="section3" class="bodySection"> 
<h3><London></h3> 
<p1>London is the capital city of England.</p> 
</div> 

</div>

來源

2016-03-14 Nidhin_toms

標籤''''和''不存在，你不能簡單地創建一個新的標籤。 –

它看起來像你可以使用CSS flexboxes：https://jsfiddle.net/p22u9h1L/

添加另一個CSS塊爲您section div修復您的定位問題：

div#section 
{ 
display: -webkit-flex; 
display: flex; 
}

來源

2016-03-14 02:24:18 Justin

這是正確的答案 - 你會認爲它會在沒有你的建議的情況下自動連續排列......你知道爲什麼嗎？ –

對於放置部分的容器，文本大小和分配的填充+邊距可能太大，導致其中一個彈出。 Flexbox允許容器適合並動態調整父容器的大小。 – Justin

請參閱可能的解決方案如下：

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    ul#row li {display:inline;} 
    .div-inline {display:inline-block;} 
    </style> 
</head> 
<body> 
    <ul id="row"> 
    <li> 
     <div class="div-inline"> 
     <h1><London></h1> 
     <p>London is the capital city of England.</p> 
     </div> 
    </li> 
    <li> 
     <div class="div-inline"> 
     <h2><London></h2> 
     <p>London is the capital city of England.</p> 
     </div> 
    </li> 
    <li> 
     <div class="div-inline"> 
     <h3><London></h3> 
     <p>London is the capital city of England.</p> 
     </div> 
    </li> 
    </ul> 
</body> 
</html>

希望這會有所幫助。

來源

2016-03-14 02:24:01

需要所有的div出現在同一行

回答

相關問題