连续三个div [英] Three divs in a row 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。 p>

• 我想用id 一个浮动 div 到左边。 div 的宽度将取决于其内容。


• 我想浮动 div 右边三个，自动宽度也取决于其内容。


• 我希望带有id 2的 div 处于占用所有剩余空间。
  

我用表格创建了它，但是我希望它与 div code> s

 < table> 
< tr> 
< td id =one> AAAAAAAAAAAAAAAAAAAAA< / td> 
< td id =two>< input style =width：100％type =search>< / td> 
< td id =three> AAAAAA< / td> 
< / tr> 
< / table> 
 
表{
 width：100％; 
} 
 
 #one 
 width：auto; 
 height：20px; 
背景颜色：红色; 
} 
 
 #two {
 width：100％; 
 height：20px; 
背景颜色：橙色; 
} 
 
 #three {
 width：auto; 
 height：20px; 
 background-color：green; 
} 
  




解决方案

strong> Flexbox



#firstRow {display：-webkit-box;显示：-ms-flexbox;显示：-webkit-flex;显示：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>

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

I have three divs.

• I want to float div with id one to the left. The width of div one will depend on its content.
• I want to float div three to the right with auto width depending also in its contents.
• I want the div with id two to be in the taking up all remaining space.

I have made it with table but I want it with divs

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

解决方案

You can do this with 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>

这篇关于连续三个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！