html – CSS中的三个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> 我有三个div. >我想浮动div,左边是id 1. div的宽度取决于其内容. >我想将d

<div ID="firstRow">    <div ID="one">AAA</div>    <div ID="two"><input  type="search"></div>    <div ID="three">AAAAAA</div></div>

我有三个div.

>我想浮动div,左边是ID 1. div的宽度取决于其内容.
>我想将div三向右浮动,自动宽度也取决于其内容.
>我希望ID为2的div占用剩下的所有空间.

我用桌子做了它,但我想用divs

<table>    <tr>        <td ID="one">AAAAAAAAAAAAAAAAAAAAA</td>        <td ID="two"><input  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;}

解决方法 您可以使用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  type="search"></div>  <div ID="three">AAAAAA</div></div>

总结

以上是内存溢出为你收集整理的html – CSS中的三个div全部内容，希望文章能够帮你解决html – CSS中的三个div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。