变化浮点值宽度

我有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

变化浮点值宽度

回答

相关问题