1

ブートストラップを使用してレスポンシブ サイトを開発しています。

ウィンドウのサイズが変更された場合に新しい行に分割したくないコンテンツを含む 2 つのコンテナーがあります。

私は現在、このフィドルを示しています。

各ニュース項目の親コンテナーで 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 に答える