拉伸和可滾動的內部div

Question

我有外部div，其中包含三個其他div作爲行內塊。第一和第三是固定寬度，而第二和第三應該放在它們之間。如果它的寬度溢出，它也應該被拉伸並且具有水平滾動條。

我的嘗試是

<div class='container'> 
    <div class='left'></div> 
    <div class='center'> 
    <div class='inner'>text content</div> 
    </div> 
    <div class='right'></div> 
</div> 

.container{ 
    height: 50px; 
    border: 1px solid red; 
    text-align: center; 
} 

.left{ 
    height: 45px; 
    width: 50px; 
    float: left; 
    border: 1px solid green; 
    display: inline-block; 
} 

.right{ 
    height: 45px; 
    width: 50px; 
    float: right; 
    border: 1px solid orange; 
    display: inline-block; 
} 

.center{ 
    height: 45px; 
    background: blue; 
    border: 1px solid blue; 
    display: inline-block; 
    max-width:100%; 
    overflow:auto; 
} 

它將按預期工作僅在「文本內容」是小的長度。當它溢出，所有三個內部divs垂直對齊，這不是我想要的。 請看我的小提琴 http://jsfiddle.net/vxffx7yk/

Answer 1

謝爾蓋我不知道這是你在找什麼。

如果第一個和第三個div是固定寬度，您可以爲內部div指定一個寬度calc。

看看這個fiddle

我分配的邊界框調整大小：邊界盒;以便不計算額外的像素，然後指定calc的寬度 - 外部div的總數。

.container { 
    height: 50px; 
    border: 1px solid red; 
    text-align: center; 
} 
.left { 
    height: 45px; 
    width: 50px; 
    float: left; 
    border: 1px solid green; 
    display: inline-block; 
    box-sizing:border-box; 
} 
.right { 
    height: 45px; 
    width: 50px; 
    float: left; 
    border: 1px solid orange; 
    display: inline-block; 
    box-sizing:border-box; 
} 
.center { 
    height: 45px; 
    background: blue; 
    border: 1px solid blue; 
    float:left; 
    display: inline-block; 
    max-width:100%; 
    width: calc(100% - 100px) !important; 
    overflow:auto; 
    box-sizing:border-box; 
} 

Answer 2

這裏是你如何做一個3列流體中心：

body{ 
 
    margin:0; 
 
} 
 
container{ 
 
    height: 50px; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
} 
 

 
.left { 
 
    position:absolute; 
 
    left:0; 
 
    width:50px; 
 
    height:50px; 
 
    background-color:red; 
 
} 
 

 
.center { 
 
    margin: 0 50px; 
 
    background-color:pink; 
 
    height:50px; 
 
    top:0; 
 
    overflow-x:auto; 
 
    white-space:nowrap; 
 
} 
 

 
.right { 
 
    position:absolute; 
 
    right:0; 
 
    top:0; 
 
    width:50px; 
 
    height:50px; 
 
    background-color:red; 
 
} 
 

 
.inner{ 
 
     
 
}

<div class='container'> 
 
    <div class='left'></div> 
 
    <div class='center'> 
 
     <div class='inner' >Some Loooooooooooooooooooooooong Text, Like really looooooooooooooooooOoOoOooOoOOOooOooooooooOOOoOooooOOoong Some Loooooooooooooooooooooooong Text, Like really looooooooooooooooooOoOoOooOoOOOooOooooooooOOOoOooooOOoong Some Loooooooooooooooooooooooong Text, Like really looooooooooooooooooOoOoOooOoOOOooOooooooooOOOoOooooOOoong Some Loooooooooooooooooooooooong Text, Like really looooooooooooooooooOoOoOooOoOOOooOooooooooOOOoOooooOOoong</div> 
 
    </div> 
 
    <div class='right'></div> 
 
</div>

Answer 3

我建議改變你的HTML元素的順序。如果前兩個元素左右浮動，則第三個元素的文本將出現在它們之間。

將white-space:nowrap添加到第三個元素以防止文本換行到多行。

.container { 
 
    height: 50px; 
 
    min-width: 150px; 
 
} 
 
.blockend { 
 
    width: 50px; 
 
    height: 100%; 
 
    float: left; 
 
    background-color: red; 
 
} 
 
.blockend-left { 
 
    float: left; 
 
} 
 
.blockend-right { 
 
    float: right; 
 
} 
 
.center { 
 
    background-color: #CCF; 
 
    overflow: hidden; 
 
    overflow-x: auto; 
 
    padding: 0 .5em; 
 
    line-height: 50px; 
 
    height: 100%; 
 
    white-space: nowrap; 
 
}

<div class="container"> 
 
    <div class="blockend blockend-left"></div> 
 
    <div class="blockend blockend-right"></div> 
 
    <div class="center">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</div> 
 
</div>

Answer 4

簡單。您使用百分比來修復元素的寬度！

10％+ 80％ - （邊界像素）+ 10％

container{ 
 
    height: 50px; 
 
    border: 1px solid red; 
 
    text-align: center; 
 
} 
 

 
.left{ 
 
    height: 45px; 
 
     width: 10%; 
 
    float: left; 
 
    border: 1px solid green; 
 
    display: inline-block; 
 
} 
 

 
.right{ 
 
    height: 45px; 
 
    width: 10%; 
 
    float: right; 
 
    border: 1px solid orange; 
 
    display: inline-block; 
 
} 
 

 
.center{ 
 
    height: 45px; 
 
    background: blue; 
 
    border: 1px solid blue; 
 
    display: inline-block; 
 
    width:calc(80% - 5px); 
 
    overflow:auto; 
 
} 
 

 
.inner{ 
 
     
 
}

<div class='container'> 
 
    <div class='left'></div> 
 
    <div class='center'> 
 
    <div class='inner'>sdfddfgdfgdfgfdgfgfgdfgdfgdddddddddddddddddddddddddddddddddddfsdfdssfssdfddfgdfgdfgfdgfgfgdfgdfgdddddddddddddddddddddddddddddddddddfsdfdssfssdfddfgdfgdfgfdgfgfgdfgdfgdddddddddddddddddddddddddddddddddddfsdfdssfssdfddfgdfgdfgfdgfgfgdfgdfg</div> 
 
    </div> 
 
    <div class='right'></div> 
 
</div>