Question

我正在尝试找到一种方法，两个div可以并排站立，而div可能有一些写作的内容。而div 2也包含一些文本。

div应当相对于div 2的宽度自动调整宽度，以便当div 1中的内容增加时高度增加而不是宽度，并且不应将div 2推出或者不影响div 2.

请点击链接。红色div应该相对于绿色div调整宽度。

#box1 {
  background: red;
  height: 100px;
  width: auto;
  float: left
}

#box2 {
  background: green;
  height: 100px;
  width: 400px;
  float: right
}

<div id="wrapper">
  <div id="box1">
    <bold>BOX 1</bold><br>Is there any way, box2 can stand next to the box 1 without limiting the width of box1. (Repeat)Is there any way, box2 can stand next to the box 1 without limiting the width of box1</div>
  <div id="box2">
    <bold>BOX 2</bold><br>Is there any way, box2 can stand next to the red without limiting the width of box1</div>
</div>

Answer 1

最简单的方法是使用flex并将height更改为min-height（并删除浮动内容，并添加如下所示的flex-settings）：

#box1 {
  background: red;
  min-height: 100px;
}

#box2 {
  background: green;
  min-height: 100px;
  width: 400px;
  flex-shrink: 0;
  flex-grow: 0;
}

#wrapper {
  display: flex;
}

<div id="wrapper">
  <div id="box1">
    <bold>BOX 1</bold><br>Is there any way, box2 can stand next to the box 1 without limiting the width of box1. (Repeat)Is there any way, box2 can stand next to the box 1 without limiting the width of box1</div>
  <div id="box2">
    <bold>BOX 2</bold><br>Is there any way, box2 can stand next to the red without limiting the width of box1. Is there any way, box2 can stand next to the red without limiting the width of box1</div>
</div>

Answer 2

此CSS将起作用（使用flex框，并将高度留给包装div）

#wrapper{
  display: flex;
  height: 150px;
}
#box1 {
    background: red;
    flex:1; /* you can change the width here */
    /* width: 50%; */    
    float:left
}

#box2 {
    background: green;
    flex:1;/* you can change the width here */
    /* width: 50%; */    
    float:right
}

http://jsfiddle.net/x7cfkpdy/14/

Answer 3

Flexbox是一个很好的解决方案。对于#wrapper div，添加“ display：flex;”。对于子div，删除浮点数，宽度和高度，只需添加'flex：1 1 0;'。这是更新的CSS：

#wrapper {
display: flex;
}

#box1  {
background-color: red;
flex: 1 1 0;
    }

#box2 {
background-color: green;
flex: 1 1 0;
    }

Answer 4

使用CSS flex，flex-grow属性，并取出float。然后使用min-height

控制高度

#wrapper{
  display: flex;
}

#box1 {
    background: red;
    flex:1; 
    /*flex-grow:1; depending on your preference*/
    min-height: 100px;
}

#box2 {
    background: green;
    flex:1;
    /*flex-grow:2; depending on your preference*/
    min-height: 100px;
}

Answer 5

这将完全符合您的目标：

#wrapper{
   display: flex;
   flex-flow: row nowrap;
   min-height: 150px;
}

 #box1 {
   flex:1; 
   background: red;
 }

#box2 {
   flex:0; 
   flex-basis:400px;
   background: green;
}

<div id="wrapper">
  <div id="box1">
    <bold>BOX 1</bold><br>
    Is there any way, box2 can stand next to the box 1 without limiting the width of box1. (Repeat)Is there any way, box2 can stand next to the box 1 without limiting the width of box1
  </div>
  <div id="box2">
    <bold>BOX 2</bold><br>
    Is there any way, box2 can stand next to the red without limiting the width of box1
  </div>
</div>

Fiddle example

两个div可以并排站立，而不会限制第一个div的宽度

5 个答案: