连续三个div CSS

<div id="firstRow"> 
    <div id="one">AAA</div> 
    <div id="two"><input style="width: 100%" type="search"></div> 
    <div id="three">AAAAAA</div> 
</div>

我有三个div s。连续三个div CSS

我想漂浮div与id one到左边。 div的宽度取决于其内容。
我想浮动div三个右边的自动宽度也取决于其内容。
我想用id为2的div来占用所有剩余的空间。

我与表造的，但是我希望它与div小号

<table> 
    <tr> 
     <td id="one">AAAAAAAAAAAAAAAAAAAAA</td> 
     <td id="two"><input style="width: 100%" type="search"></td> 
     <td id="three">AAAAAA</td> 
    </tr> 
</table> 

table { 
    width: 100%; 
} 

#one 
    width: auto; 
    height: 20px; 
    background-color: red; 
} 

#two{ 
    width: 100%; 
    height: 20px; 
    background-color: orange; 
} 

#three { 
    width: auto; 
    height: 20px; 
    background-color: green; 
}

来源

2016-01-18 MrRobot

相关：http://stackoverflow.com/q/2603700/3597276 –

在我看来雷纳德的Flexbox的答案是要走的路。 –

您可以Flexbox的

#firstRow { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
} 
 

 
#one { 
 
    background-color: red; 
 
} 
 

 
#two { 
 
    -webkit-flex: 1;  
 
    -ms-flex: 1;  
 
    flex: 1; 
 
} 
 
    
 
#three { 
 
    background-color: green; 
 
}

<div id="firstRow"> 
 
    <div id="one">AAA</div> 
 
    <div id="two"><input style="width: 100%" type="search"></div> 
 
    <div id="three">AAAAAA</div> 
 
</div>

来源

2016-01-18 01:17:45

好的答案，但[flexbox缺乏全面支持]（http://caniuse.com/#feat=flexbox）。 – Ouroborus

@Ouroborus，所有现代浏览器都支持flexbox。只有衰落的IE 8＆9没有。如果这是一个很好的答案，你应该upvote，导致浏览器支持不是一个问题（除非OP需要IE 8和9的支持）。 –

我不同意Ouroborus，你必须回头看看缺少Flexbox支持（除非你拒绝使用供应商标签）。不过，我建议这个答案对于IE10和Safari 8的供应商标签（包括iOS 8上的Chrome，否则我不打扰）会更有帮助。我不认为有必要添加旧的供应商标签，几乎没有人会需要这些。 –

做到这一点通常不应这一点，因为，好吧，你有桌子。

.table { 
 
    display:table; 
 
    width:100%; 
 
    border-spacing:2px; 
 
} 
 
.row { 
 
    display:table-row; 
 
} 
 
.cell { 
 
    display:table-cell; 
 
    padding:1px; 
 
} 
 
.cell,td { 
 
    white-space:nowrap; 
 
}

<div class="table"> 
 
    <div class="row"> 
 
     <div class="cell" style="background-color:#f88;">cell 1</div> 
 
     <div class="cell" style="background-color:#8f8;width:100%;"><input style="width: 100%" type="search" placeholder="Search box"></div> 
 
     <div class="cell" style="background-color:#88f;">cell 3</div> 
 
    </div> 
 
</div> 
 
<table style="width:100%;"> 
 
    <tr> 
 
     <td style="background-color:#f88;">cell 1</td> 
 
     <td style="background-color:#8f8;width:100%;"><input style="width: 100%" type="search" placeholder="Search box"></td> 
 
     <td style="background-color:#88f;">cell 3</td> 
 
    </tr> 
 
</table>

来源

2016-01-18 01:33:51 Ouroborus

1998年，那个首先想到使用表格进行布局的人写了一篇文章，名为“网络毁了，我毁了它”，感叹他做出这样一件事的可怕决定。从那时起，使用表格进行布局是众所周知的淫秽行为，没有知识渊博的开发人员会考虑使用比这更好的方法。另外，CSS表格属性不会使HTML元素成为表格。 – Rob

@Rob唯一重要的区别是隐含的上下文。在桌面上拍一个'role =“presentation”'，并且区别被删除。但我同意，只有一个怪物会这样做。（OP的原始问题基本上是“我如何在不使用'

'的情况下制作表格？”）。 – Ouroborus

向HTML元素添加属性不会更改HTML文档的结构和大纲;特别是标准中不存在的角色属性。 – Rob

连续三个div CSS

回答

相关问题