使用浮動對齊頂部？

-2

如何浮動左側的兩個元素並右移第三個元素，第三個元素的頂部與第一個元素的頂部內嵌？使用浮動對齊頂部？

item 1 item 3 
item 2

我已經嘗試浮動項目1和項目2左，和項目，3對，但隨後第3項的頂部只在第2項的頂部，這樣的：

item 1 
item 2 item 3

HTML：

<div class="item1"></div> 
<div class="item2"></div> 
<div class="item3"></div>

CSS：

.item1 { 
    float:left; 
} 
.item2 { 
    float:left; 
} 
.item3 { 
    float:right; 
}

來源

2017-08-02 panthro

你可以分享你的代碼？ –

添加到代碼 – panthro

的代碼https://jsfiddle.net/sky2Lhv3/ - 修改此.. – bhv

使用清晰既能第二個元素，並把你的第二個.item2後第三

.item1 { 
 
    float:left; 
 
} 
 
.item2 { 
 
    float:left; 
 
    clear: both; 
 
} 
 
.item3 { 
 
    float:right; 
 
}

<div class="item1">1</div> 
 
<div class="item3">3</div> 
 
<div class="item2">2</div>

來源

2017-08-02 12:10:08

這是顯而易見的解決方案，但如果您沒有完全控制標記，則不起作用。 –

是的，你是對的，但由於他沒有提及任何關於標記的問題，我回答他假設他可以更改html。 –

-2

注：原來的問題沒有說明清理的東西。

如果將項目浮動而沒有任何許可，它應該馬上工作，請參閱下面的示例。

#one { 
 
    width: 150px; 
 
    height: 120px; 
 
    background: #fc0; 
 
    float: left; 
 
} 
 

 
#two { 
 
    width: 120px; 
 
    height: 150px; 
 
    background: #09f; 
 
    float: left; 
 
} 
 

 
#three { 
 
    width: 100px; 
 
    height: 130px; 
 
    background: #3c6; 
 
    float: right; 
 
}

<div id="container"> 
 
<div id="one">#1</div> 
 
<div id="two">#2</div> 
 
<div id="three">#3</div> 
 
</div>

如果你想元＃2是低於＃1和＃3仍然會在右側＃1對齊，您應該開關＃2，＃3的並將＃clear: both;應用到＃2（請參閱Saravanan I的回答）或在＃1和＃2周圍添加包裝元素（請參閱bhv的評論）。

作爲替代方案，如果標記更改不可行，則可以使用flexbox而不是float，它允許您對元素進行排序，請參閱下面的示例。

#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
#container > div { 
 
    flex-basis: 34%; 
 
} 
 
#one { 
 
    background: #fc0; 
 
    order: 1; 
 
} 
 

 
#two { 
 
    background: #09f; 
 
    order: 3; 
 
} 
 

 
#three { 
 
    background: #3c6; 
 
    order: 2; 
 
}

<div id="container"> 
 
<div id="one">#1<br>some short text</div> 
 
<div id="two">#2<br>other text, should be directly below #1</div> 
 
<div id="three">#3<br>Oh boy,<br>this is much longer.<br>Will it break the layout?<br>#2 is supposed to be<br>right next to #1.</div> 
 
</div>

來源

2017-08-02 12:10:25 Paul

Flex解決方案不起作用，因爲＃3的高度增加會將＃2向下推動頁面。＃2應直接位於＃1之下。有任何想法嗎？ – panthro

好吧，考慮到我的第二個片段的背景顏色，＃2與＃1直接相鄰，即使＃3文字較長。 – Paul

請用適量的文字填滿＃3 - 然後你會發現它不起作用。 – panthro

使用此代碼

.main { 
 
    float:left; 
 
} 
 

 
.item3 { 
 
    float:right; 
 
}

<html> 
 
<head> 
 
</head> 
 
<body> 
 

 
    <div class="main"> 
 
    <div class="item1">Item 1</div> 
 
    <div class="item2">Item 2</div> 
 
    </div> 
 

 
    <div class="item3">Item 3</div> 
 

 
</body> 
 
</html>

來源

2017-08-02 12:15:21

-1

這裏有一個簡單的解決方案...只是使用和項目1後clearfix財產這樣一個

.item1 { 
 
    float:left; 
 
} 
 
.item2 { 
 
    float:left; 
 
} 
 
.item3 { 
 
    float:right; 
 
} 
 

 
div{ 
 
    width:100px; 
 
    height:20px; 
 
    display:inline-block; 
 
    background:grey; 
 
} 
 

 
.clearfix{ 
 
    display:block; 
 
    background:transparent; 
 
    clear:right; 
 
}

<div class="item1">A</div> 
 
<div class="clearfix"></div> 
 
<div class="item2">B</div> 
 
<div class="item3">C</div>

來源

2017-08-02 12:16:54

使用浮動對齊頂部？

回答

相關問題