搜索
写文章提问
登录注册
展开

如何处理HTML中的内联块元素？

内容来源于 Stack Overflow，并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (117)
.container {
  background-color: red;
  display: flex;
}

.container {
  background-color: red;
}

.innero1 {
  display: flex;
}

.one,
.two,
.inner2,
.inner3 {
  border: 2px solid black;
  display: inline-block;
}

.two {
  list-style-type: none;
}

.inner2,
.inner3 {
  margin-left: 3px;
  height: max-content;
}

ul {
  margin: 0;
  padding-left: 3px;
}
<div class="container">
  <div class="innero1">
    <div class="inner1">
      <div class="one">Text1</div>
      <div class="one">Text2</div>
      <div class="one">Text3</div>
      <div class="one">Text4</div>
    </div>
    <div class="inner2">Text5</div>
    <div class="inner3">Text6</div>
  </div>
  <div class="innero2">
    <div class="four">
      <ul>
        <li class="two">Text7</li>
        <li class="two">Text8</li>
      </ul>
    </div>
  </div>
</div>

​

如你所见，div不要表现得像典型的内联块。

我想要实现的是让它看起来像这样(当调整大小时，它们跳到下一行)：

​

.one {
  border: 2px solid black;
  display: inline-block;
}
<div class="container">
  <div class="one">Text1</div>
  <div class="one">Text2</div>
  <div class="one">Text3</div>
  <div class="one">Text4</div>
  <div class="one">Text5</div>
  <div class="one">Text6</div>
  <div class="one">Text7</div>
  <div class="one">Text8</div>
</div>

​

提问于

2 个回答

热门排序
用户回答回答于

你不只是移除flexboxes，把所有中间容器设置为display:inline

​

.container {
  background-color: red;
  display: block;
}

.container {
  background-color: red;
}

.inner1, .innero1, .innero2, .four {
  display: inline;
}

.one,
.two,
.inner2,
.inner3 {
  border: 2px solid black;
  display: inline-block;
}

.two {
  list-style-type: none;
}

ul {
  margin: 0;
  padding-left: 0px;
  display:inline;
}
<div class="container">
  <div class="innero1">
    <div class="inner1">
      <div class="one">Text1</div>
      <div class="one">Text2</div>
      <div class="one">Text3</div>
      <div class="one">Text4</div>
    </div>
    <div class="inner2">Text5</div>
    <div class="inner3">Text6</div>
  </div>
  <div class="innero2">
    <div class="four">
      <ul>
        <li class="two">Text7</li>
        <li class="two">Text8</li>
      </ul>
    </div>
  </div>
</div>

​

赞0收藏0评论0分享
你不只是移除flexboxes，把所有中间容器设置为display:inline ​ .container { background-color: red; display: block; } .container { background-color: red;...
用户回答回答于
.container{
  display: inline-block;
}
.innero1 {
  display: inline-block;
}

.innero1 div, .container div {
  float: left; 
  margin-right: .5em;
  display: inline-block;
}
.one { 
  float: left; 
  margin-right: .5em
}

如果这不能解决你的问题，让我知道，我会看看是否可以帮助更多。

赞0收藏0评论0分享
.container{ display: inline-block; } .innero1 { display: inline-block; } .innero1 div, .container div { float: left; margin-righ...
广告关闭

云服务器限时特惠 1核2G首年99元起

精选中小企业最主流配置，适用于web应用场景、小程序及简单移动App，所有机型免费分配公网IP和50G高性能云硬盘（系统盘）。

所属标签

相似问题

扫码关注云+社区

领取腾讯云代金券