Question

我在页面上有两个div。 Div＃1向左浮动，其中包含图像和一些文本。如我所料，div＃2中的文本很好地环绕了它。但是，如果在div＃2中存在带有某些样式的blockquote，则该样式会扩展到div＃1中。这不是我想要的

我确定我缺少超级基本的东西，但我不知道它是什么。

在此示例中，我不希望红色变成灰色。

.floatl {
  float: left;
  height: 200px;
  width: 100px;
  background: #CCCCCC;
  opacity: 0.5;
  margin-right: 2px;
}

blockquote {
  border-bottom: 3px solid red;
  border-top: 3px solid red;
}

<div class="floatl"></div>
<div>
  <p>This is some text here.</p>
  <blockquote>This is a quote.</blockquote>
</div>

我正在寻找a）获取div＃2的非文本内容以尊重div＃1或b）发现另一种将div 1浮动到左侧的方法。

感谢您的帮助！

Answer 1

将div包装到新的div中并应用display:flex，它将成为flexbox容器。

.new-wrapper {
  display: flex;
}

您的主要内容（现在是弹性项目和.float1 div）将要缩小。我给内容div一个类，并告诉它进行扩展以填充其余的flex容器：

.main-content {
  flex-grow: 1;
}

删除float，现在一切都好。

.new-wrapper {
  display: flex;
}
.floatl {
  height: 200px;
  width: 100px;
  background: #CCCCCC;
  opacity: 0.5;
  margin-right: 2px;
}

.main-content {
  flex-grow: 1;
}

blockquote {
  border-bottom: 3px solid red;
  border-top: 3px solid red;
}

<div class="new-wrapper">
  <div class="floatl"></div>
  <div class="main-content">
    <p>This is some text here.</p>
    <blockquote>This is a quote.</blockquote>
  </div>
</div>

Blockquote样式打破了float-left div？

1 个答案: