變化浮點值寬度

我有2個元素具有流體寬度和浮法彼此。一個元素在左邊，另一個在右邊。當沒有足夠的空間時，第二個元素將切換到下一行。如果發生這種情況，我會喜歡它不被右對齊（float：right），但是左對齊。變化浮點值寬度

ul { 
 
    width: 250px; 
 
    background: #ccc; 
 
    display: block; 
 
    margin-bottom: 2em; 
 
    clear: both; 
 
    padding: 0; 
 
    list-style: inside none; 
 
} 
 
.left { 
 
    float: left; 
 
    background: #2FCC71; 
 
} 
 
.right { 
 
    float: right; 
 
    background: #3598DC; 
 
} 
 
/* just for clearing floats */ 
 

 
ul:before, 
 
ul:after { 
 
    content: ""; 
 
    display: table; 
 
} 
 
ul:after { 
 
    clear: both; 
 
}

<h2>short right element</h2> 
 
<ul> 
 
    <li class="left">Left Element</li> 
 
    <li class="right">Right Element</li> 
 
</ul> 
 
<h2>Problem: long right element is right aligned</h2> 
 
<ul> 
 
    <li class="left">Left Element</li> 
 
    <li class="right">Right Element with longer text</li> 
 
</ul> 
 
<h2>what I would love: if right aligned element breaks, make it left aligned:</h2> 
 
<ul> 
 
    <li class="left">Left Element</li> 
 
    <li class="right" style="float:left">Right Element with longer text</li> 
 
</ul>

來源

2016-07-20 andrej

不，CSS無法檢測到溢出/換行符。 –

......至少不會用浮漂... –

如果使用引導CSS和引導網格系統，然後輕鬆地將解決。 http://getbootstrap.com/css/#grid –

Flexbox，就可以做到這一點......與white-space:nowrap。

Codepen Demo

* { 
 
    margin: 0; 
 
} 
 
.wrap { 
 
    width: 50%; 
 
    margin: 1em auto; 
 
    border: 1px solid grey; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 
.left { 
 
    background: orange; 
 
    white-space: nowrap; 
 
} 
 
.right { 
 
    background: #c0ffee; 
 
    white-space: nowrap; 
 
} 
 
.wrap.smaller { 
 
    width: 40%; 
 
}

<div class="wrap"> 
 
    <p class="left">Short Text</p> 
 
    <p class="right">Much longer non-breaking text</p> 
 
</div> 
 

 
<div class="wrap smaller"> 
 
    <p class="left">Short Text</p> 
 
    <p class="right">Much longer non-breaking text</p> 
 
</div>

看多了，有它整個一個視頻在CSS-Tricks

來源

2016-07-20 10:10:27

作品魅力 - 謝謝:) – andrej

您可以使用媒體查詢來修復

@media screen and (max-width: 480px) { /* Put breaking size here like 480 */ 
    .right { 
     float:left; 
     } 
    }

來源

2016-07-20 10:05:52

在這種情況下它不起作用，因爲兩個寬度都是動態的！ – Pugazh

您還可以使用jQuery

var rightText = $(".right").outerWidth(); 
 
var leftText = $(".left").outerWidth(); 
 
var ulWidth = $("ul").width(); 
 
if((rightText+leftText) > ulWidth) 
 
\t $(".right").css("float", "left");

ul {width:250px; background:#ccc; display:block; margin-bottom:2em; clear:both;padding:0; list-style:inside none;} 
 

 
\t 
 
.left {float:left; background:#2FCC71;} 
 
.right {float:right; background:#3598DC;} 
 

 
/* just for clearing floatt */ 
 
ul:before, 
 
\t ul:after { 
 
\t \t content:""; 
 
\t \t display:table; 
 
\t } 
 
\t ul:after { 
 
\t \t clear:both; 
 
\t }

<script src="https://code.jquery.com/jquery-1.10.2.js"></script> 
 
<h2>Problem: long right element is right aligned</h2> 
 
<ul> 
 
    <li class="left">Left Element</li> 
 
    <li class="right">Right Element with longer text</li> 
 
</ul>

玩

來源

2016-07-20 10:29:42

變化浮點值寬度

回答

相關問題