3栏布局，与中间一列响应宽

左栏有这将有一个固定的一个图标大小35px。

中间一列将有文字。根据屏幕尺寸的不同，列的宽度应该增加/减少。

最后一栏也有文字。这段文字不应该闯入第二行。该列应该取其内容的宽度。

所以从我个人理解，这是HTML，

<div class="row"> 
<div class="col-1"></div> 
<div class="col-2"></div> 
<div class="col-3"></div> 
</row>

和CSS，

.row { width:100%; } 

.col-1 { width:35px; } 

.col-2 { width:80%; } 

.col-3 { width:10%; }

这不是给我预期的结果。有人可以告诉我它是如何完成的。

来源

2015-10-15 user3607282

是否柱3具有固定的（PX或％）宽度或是否需要根据内容成长？ –

@SalmanA是的。 col-3将根据内容而改变。它会改变，以保持一切。 col-2宽度只应改变屏幕尺寸（宽度）。含义 - col-2内容可以闯入另一行。 – user3607282

你可以使用Flexbox的

 <style> 
.parent { 
    display:flex; 
    width: 100%; 
} 
.item { 
    border: 1px solid #000; 
    height: 100px; 
} 
.a { 
    width: 85px; 
} 
.b { 
    flex: 1 auto; 
} 
    </style> 
<div class="parent"> 
    <div class="item a"></div> 
    <div class="item b"></div> 
    <div class="item c">rgfdgfdgfdgfdgfdgfdgfdg</div> 
</div>

https://jsfiddle.net/bkqgzghb/1/

来源

2015-10-15 10:43:57 orgertot

完美运作。谢谢。 :) – user3607282

Flexbox，就可以照顾大多数的这一点。

最后一栏也有文字。这段文字不应该闯入第二行。该列应该取其内容的宽度。

为此您需要添加：white-space:no-wrap到相应的div。

请注意，这可能会导致屏幕尺寸较小时出现问题。

JSfiddle Demo

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 
.row { 
 
    display: flex; 
 
    margin-bottom: 10px; 
 
} 
 
.col-1 { 
 
    width: 35px; 
 
    background: red; 
 
} 
 
.col-2 { 
 
    flex: 1; 
 
    background: blue; 
 
} 
 
.col-3 { 
 
    background: green; 
 
    white-space: nowrap; 
 
}

<div class="row"> 
 
    <div class="col-1"></div> 
 
    <div class="col-2"></div> 
 
    <div class="col-3"> 
 
    <p>Lorem ipsum dolor sit amet!</p> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-1"></div> 
 
    <div class="col-2"></div> 
 
    <div class="col-3"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vel, similique!</p> 
 
    </div> 
 
</div>

来源

2015-10-15 10:49:10

3栏布局，与中间一列响应宽

回答

相关问题