HTML側欄p標籤將主要內容區域向下移動

我有一個系統，左側有一個側欄，右側有一個主要內容區域。當我去添加一些p標籤到側邊欄時，它會將整個內容區域向下移動幾行。我想讓邊欄和內容區域對齊。HTML側欄p標籤將主要內容區域向下移動

的jsfiddle：http://jsfiddle.net/t60Lk8ra/1/ （不正確顯示的一切，但你可以看到這個問題，兩個酒吧需要對齊）

代碼：

HTML：

<body> 
<div class="left"> 
    sidebar1 

    <p class="set">placeholder</p> 

    <p class="set">placeholder</p> 

    <p class="set">placeholder</p> 

    <p class="set">placeholder</p> 

    <p class="set">placeholder</p> 
</div> 

<div class="right"> 
    sidebar2 
</div> 
</body>

CSS：

div.left{ 
width:20%; 
height:98%; 
background-color: #787F6C; 
margin-top: 10px; 
margin-bottom: 10px; 
margin-left: 1%; 
margin-right: 1%; 
display : inline-block; 

} 
div.right{ 
width:75%; 
margin-right: 1%; 
height:98%; 
background-color: white; 

display : inline-block; 
} 

.set{ 
width: 92%; 
margin-top: 3%; 
margin-left: 5%; 
margin-right: 5%; 
height: 20px; 
display: inline-block; 
background-color: #D5F4C8; 

} 
body{ 
    background: #D5F4C8; 
    margin:0; 
}

Thanks in adva NCED！

來源

2015-09-06 intboolstring

如果添加了'浮動：左;'到兩部分，你會在一個更好的地方，即'。左{浮動：左; }'和'.right {float：left; }' – Djave

謝謝，這工作！ – intboolstring

確保您瞭解浮動的工作原理。它將使許多其他定位屬性無效:) –

浮動和對齊但是都工作對於所有事情，CSS也必須進行一些調整與排水溝&的邊界平均對齊。

HTML

<body> 
    <div class="left">sidebar1 
    <p class="set">placeholder</p> 
    <p class="set">placeholder</p> 
    <p class="set">placeholder</p> 
    <p class="set">placeholder</p> 
    <p class="set">placeholder</p> 
    </div> 
    <div class="right">sidebar2 
    <p class="set">placeholder</p> 
    </div> 
</body>

CSS

div.left { 
float: left; 
width:20%; 
background-color: #787F6C; 
margin-top: 10px; 
margin-bottom: 10px; 
margin-left: 1%; 
display : inline-block; 
} 
div.right { 
float: right; 
width:75%; 
background-color: #ffffff; 
margin-top: 10px; 
margin-bottom: 10px; 
margin-right: 1%; 
display : inline-block; 
} 
.set { 
width: 92%; 
margin-top: 10px; 
margin-left: 5%; 
margin-right: 5%; 
height: 20px; 
display: inline-block; 
background-color: #D5F4C8; 
} 
body { 
background: #D5F4C8; 
margin:0; 
}

來源

2015-09-06 22:00:49

使用float

float:left;

應該工作

來源

2015-09-06 20:39:28

只需添加vertical-align: top所以你不必依靠浮動：

div.right { 
    vertical-align: top; 
    ... 
}

來源

2015-09-06 20:41:09 kremalicious

HTML側欄p標籤將主要內容區域向下移動

回答

相關問題