1

我正在使用引导程序开发响应式网站。

我有两个容器，它们的内容在调整窗口大小时不想换行。

我目前有这个演示的小提琴。

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

你可以在这张图片中看到这个

有什么线索吗？

这是基本的 css （虽然这一切都在小提琴中）：

   /* News items */
.news-item {
    padding:10px 0 10px 10px;
}

 .news-item p {
padding:0;
margin:0;   
}

.news-item img,
.news-item-text {
float:left;
}

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

.news-heading {
font-size:18px;
 }

 .news-tags {
font-family:ffs-italic;
font-size:12px; 
 }

这是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>
4

2 回答 2

1

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

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

您还需要确定每个<p>div 内的宽度，如下所示：

.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;
    }
}

我希望它有效！

于 2013-03-16T11:11:49.083 回答
0 
 .news-item a
     {
      display: block;
      float: left
     }
 .news-item-text
    {
    float: right;
    width: 75%; /* adjust this to fit */
    }
于 2013-03-16T10:35:31.660 回答