如何讓兩個HTML區塊在CSS中對齊？

我有下面的代碼與兩個部分塊之後垂直對方，我希望他們水平對齊。爲了做到這一點，我把他們的屬性內聯塊在我的CSS位置參數，但它不起作用。如何讓兩個HTML區塊在CSS中對齊？

這裏是我的代碼：

HTML

<section class="desc-block-left"> 
<img class="icon"src="img/scolarite.png" alt="Scolarité"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, quos, perspiciatis reiciendis explicabo possimus vel culpa fugiat voluptatum laboriosam hic adipisci dicta itaque sed ipsum assumenda! Alias voluptatum blanditiis beatae? 
</p> 
<ul> 
<li><img src="img/tools-info2.png" alt="Info"></li> 
<li><img src="img/tools-fav2.png" alt="Fav"></li> 
</ul> 
</section> 
<section class="desc-block-right"> 
<img class="icon"src="img/scolarite.png" alt="Scolarité"> 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, quos, perspiciatis reiciendis explicabo possimus vel culpa fugiat voluptatum laboriosam hic adipisci dicta itaque sed ipsum assumenda! Alias voluptatum blanditiis beatae? 
</p> 
<ul> 
<li><img src="img/tools-info2.png" alt="Info"></li> 
<li><img src="img/tools-fav2.png" alt="Fav"></li> 
</ul> 
</section>

CSS

/*LAYOUT LEFT COLUMN*/ 

.desc-block-left{ 
    position:inline-block; 
    border-style:solid; 
    background-color:#ffffff; 
    width:40%; 
    height:110px; 
    margin:30px 10px 100px 150px; 
    border-radius:10px; 
} 

.icon{ 
    float:left; 
    margin:5px; 
} 

.desc-block-left p{ 
    position:inline-block; 
    float:left; 
    margin:5px; 
    width:70%; 
    text-align:justify; 
} 

.desc-block-left ul{ 
    display:inline-block; 
} 

.desc-block-left ul li{ 
    position:inline; 
    margin:10 5 10 5; 
    list-style:none; 
} 

/*LAYOUT RIGHT COLUMN*/ 

.desc-block-right{ 
    position:inline-block; 
    border-style:solid; 
    background-color:#ffffff; 
    width:40%; 
    height:110px; 
    margin:30px 10px 100px 150px; 
    border-radius:10px; 
} 

.desc-block-right p{ 
    position:inline-block; 
    float:left; 
    margin:5px; 
    width:70%; 
    text-align:justify; 
} 

.desc-block-right ul{ 
    display:inline-block; 
} 

.desc-block-right ul li{ 
    position:inline; 
    margin:10 5 10 5; 
    list-style:none; 
}

來源

2013-10-17 user2891155

更換每'位置：inline-block的| inline'與'display：inline-block |內聯「它將打破整個CSS –

@DhavalMarthak我真的不明白你的意思，把所有內聯有效地打破了一切。 – user2891155

沒有'position：inline-block;'這樣的設置，嘗試'display：inline-block'代替。 –

那麼，float並不能真正解決問題，並且通常不是一個好的做法，因爲它會影響到後續的UI靈活性。然而，@Mela正確地表明邊距是導致錯誤的最可能原因，因爲80％+ 360px不太可能適合水平對準大多數容器。這隻會在1920px寬的屏幕上留下24px。

但是，通過將保證金設置爲正確的百分比來實現。你應該考慮這個左邊距，如果你想堅持內嵌塊，我建議。

但是，如果您不想使用基於百分比的邊距，則應該將截面寬度設置爲px。大多數時候混合px和％是一個糟糕的主意，因爲你遇到的神祕問題必然會出現。

.desc-block-left1 { 
    display:inline-block; 
    border-style:solid; 
    background-color:#ffffff; 
    width:40%; 
    height:110px; 
    margin:30px 10px 10px 5%; 
    border-radius:10px; 
} 
.desc-block-right1 { 
    display:inline-block; 
    border-style:solid; 
    background-color:#ffffff; 
    width:40%; 
    height:110px; 
    margin:30px 10px 10px 5%; 
    border-radius:10px; 
}

http://jsfiddle.net/dnGy5/（從LOREM和IMGS清除，因爲它們只擔任此事分心）

來源

2013-10-17 16:27:55

像魅力一樣工作，感謝您的幫助@Simon Aronsson！ – user2891155

.desc-block-left{ float:left; } 
.desc-block-right{ float:right; }

你爲什麼不使用簡單地套用一個浮動的塊？請記住，以這種方式顯示：inline-block;沒用的。其他的事情。邊際值非常高，所以如果您沒有大量內容，它們將永遠不會水平對齊。

來源

2013-10-17 16:11:22 Mela

首先，

position: inline-block;

真的應該：

display: inline-block;

然後問題：
inline-block有空白問題。如果在使用內嵌塊顯示的兩個元素之間存在空白區域，則會佔用空白區域。（我的意思是我們使用回車來格式化HTML代碼以提高可讀性）。

<section> 
... 
</section> (this carriage return is considered a whitespace) 
<section> 
... 
</section>

這意味着一個很好的50％部分，緊接着又50％部分將被顯示爲50％+空白+ 50％。第二列落在下一行。然而，現在你計算你的百分比總會有額外的空間來解決它。

溶液（S）：

我最喜歡的是把兩個元素之間的註釋。它保持可讀性並乾淨地修復問題。

<section> 
... 
</section><!-- (this comment is not considered a whitespace) 
--><section> 
... 
</section>

或者，你可以關閉後立即打開第二個標籤第一：

<section> 
... 
</section><section> 
... 
</section>

來源

2014-03-04 02:56:53

如何讓兩個HTML區塊在CSS中對齊？

回答

相關問題