Html Twitter引导中断div的内容，其中包含多个元素

我正在使用bootstrap开发一个响应性强的站点

我有两个容器，其中包含的内容在调整窗口大小时我不想拆分为新行

我现在有这个演示

我认为在父容器上为每个新闻条目使用clearfix会起作用。但是文本在调整大小时与图像分离

你可以从中看到这一点

有什么线索吗

这是最基本的css（尽管这一切都在摆弄中）：

这是html的顶部：

  <div class="row"><!-- breaking and buzzing -->
            <div class="span4"><!-- breaking news -->
                <h2>Breaking</h2>
                <div id="breakingNews" class="rounded clearfix">
                    <div class="news-item clearfix">
                        <a href="">
                            <img src="img/news/sm/sq01.jpg" width="54" height="54" />
                        </a>
                        <div class="news-item-text">
                            <p class="news-heading"><a href="">Omni Scents to launch...</a></p>
                            <p class="news-subheading">At vero eos fragrance line inspired</p>
                            <p class="news-tags"><a href="" class="pink">BEAUTY</a>, <a href="" class="pink">PRODUCTS</a></p>
                        </div>
                    </div>
                    <div class="news-item clearfix">
                        <a href="">
                            <img src="img/news/sm/sq02.jpg" width="54" height="54" />
                        </a>
                        <div class="news-item-text">
                            <p class="news-heading"><a href="">IFF finishes year strong...</a></p>
                            <p class="news-subheading">Lorem ipsum in dolor contratis</p>
                            <p class="news-tags"><a href="" class="orange">INDUSTRY</a></p>
                        </div>
                    </div>

打破

vero eos香水系列灵感来源于



多洛-康涅狄格症中的同侧眼

在这些情况下，您需要浮动div并指定div的宽度，如下所示：

.news-item {
  padding: 10px 0 10px 10px;
  float: left;
  width: 220px;
}

.news-item-text {
  padding: 0 0 0 5px;
  width: 160px;
}

您还需要确定div中每个

的宽度，如下所示：

.news-item {
  padding: 10px 0 10px 10px;
  float: left;
  width: 220px;
}

.news-item-text {
  padding: 0 0 0 5px;
  width: 160px;
}

对于响应式布局，您需要使用标签

@media

再次设置每个宽度，如：

@media (max-width: 767px) {
  .news-item {
      padding: 10px 0 10px 10px;
      float: left;
      width: 160px;
    }

  .news-item-text {
      padding: 0 0 0 5px;
      width: 100px;
    }
}

---

我希望它能起作用

在这些情况下，您需要浮动div并指定div的宽度，如下所示：

.news-item {
  padding: 10px 0 10px 10px;
  float: left;
  width: 220px;
}

.news-item-text {
  padding: 0 0 0 5px;
  width: 160px;
}

您还需要确定div中每个

的宽度，如下所示：

.news-item {
  padding: 10px 0 10px 10px;
  float: left;
  width: 220px;
}

.news-item-text {
  padding: 0 0 0 5px;
  width: 160px;
}

对于响应式布局，您需要使用标签

@media

再次设置每个宽度，如：

@media (max-width: 767px) {
  .news-item {
      padding: 10px 0 10px 10px;
      float: left;
      width: 160px;
    }

  .news-item-text {
      padding: 0 0 0 5px;
      width: 100px;
    }
}

---

我希望它能起作用

你能说得更清楚一点吗，你所说的破坏是什么意思，你想让

嗡嗡声

出现在

破坏

下面吗&破坏性的产品一个接一个地出现。不，我指的是每个新闻项目中的内容。我总是希望它是父容器的100%宽度。因此，方形图像及其旁边的段落应始终位于行块中。这有意义吗。看一看图片链接。你能更清楚一点吗？你说的中断是什么意思？你想让

嗡嗡声

出现在

中断

下面吗？中断产品会一个接一个出现。不，我是指每个新闻项目中的内容。我总是希望它是父容器的100%宽度。因此，方形图像及其旁边的段落应始终位于行块中。这有意义吗。请看一下图像链接。@lharby可以吗？这段代码进入了您面临问题的断点内。@lharby这行吗？这段代码进入了你面临问题的断点。是的，这看起来是正确的，我喜欢你的答案，只是我希望解决所有不同的最大/最小宽度，而不必对每一个都进行编码。谢谢。是的，这看起来是正确的，我喜欢你的答案，只是我希望能够解决所有不同的最大/最小宽度，而不必对每一个进行编码。非常感谢。