Question

我有外部div，其中包含三个其他div作为内联块。第1和第3是固定宽度，第2和第3应放在它们之间。如果它的宽度溢出，它也应该被拉伸并有一个水平滚动条。

我的尝试是

<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;
}

只有“文本内容”的长度很短时才能正常工作。当它溢出时，所有三个内部div都垂直对齐，这不是我想要的。请看我的小提琴 http://jsfiddle.net/vxffx7yk/

Answer 1

谢尔盖我不确定这是不是你想要的。

如果第1和第3个div是固定宽度，则可以为内部div指定calc的宽度。

查看此fiddle

我将边框指定为box-sizing：border-box;这样就不考虑额外的像素，然后分配计算的宽度 - 外部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列的操作：

＆＃13;

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{
        
}

＆＃13;

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

＆＃13;

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>

拉伸和可滚动的内部div

4 个答案: