如何在HTML中将3个div彼此相邻放置

Julius 发表于 Dev

朱利叶斯

这是图片

你好，我试图像在链接中那样将3 div并排放置（对不起，我无法显示该图片，我的排名显然太低而无法显示该图片），如果您看不到该图片，我试图将3 div与内联显示彼此，即使您更改浏览器的大小也不会调整大小，我该如何处理？感谢您的时间

这是我的代码

body{

}
#wrap{
    width:auto;
 margin:0 auto;
  border:0px solid;
 height:200px;
  display:block;
  
}
#one {
  width:40%;
  float:left;
  background:red;
}

#two {
 background:yellow;

}

#three {
  width:40%;
  float:inherit;
   background:blue;
}

<div id="wrap">
    <div id="one"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="two"> BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
    <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

罗南·塞皮斯（Ronen Cypis）

检查这个小提琴

    #wrap:after {
      display: block;
      height: 0px;
      clear: both;
      float: none;
    }
    #wrap div {
      float: left;
      word-break: break-all;
    }
    #one {
      width: 40%;
      background-color: red;
    }
    #two {
      width: 20%;
      background-color: yellow;
    }
    #three {
      width: 40%;
      background-color: blue;
    }

<div id="wrap">
  <div id="one">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
  <div id="two">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
  <div id="three">BREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAKBREAK</div>
</div>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。