3

私は次のhtmlを持っています-

 <div class="container">
  <h1 class="page-header" id="property_head">A cool title</h1> 
  <div class="row text_img">
    <div class="span9">
      <div class="row">
        <div class="span3" id="activity"><img src="http://some/img.png"></div>
        <div class="span5" id="activity_text"><h3 class="text_title">Great Title</h3><br><p class="lead">Foo</p></div>
      </div>
    </div>  
  </div>
 </div>

および次のcss-

.text_img {
  padding: 30px;
  margin-bottom: 30px;
  margin-left: 100px;

}

#activity {
  float: left;
  margin-right: 30px;
}

#activity_text {
  float: right;
  border:1px solid black;
}

とにbootrapを使用しcontainer page-header rowていspan3/5ます。下のブラウザのサイズを変更すると、300pxの#activity_text位置になり、その下に配置されます#activity。

私はメディアクエリを使用していますが、テキストの内訳がimgの下に配置され、imgがテキストの中央に配置され、下のすべての幅でそのように維持されるようにしたいと思います（メディアクエリを使用）。

複数のアプローチを試した後、これを機能させるためのCSSがわかりません。ご清聴ありがとうございました。添付をご覧ください。ここに画像の説明を入力してください ここに画像の説明を入力してください

注：メディアクエリのブレークポイントに気付くために背景の色を変更する

4

1 に答える 1

1

特定のメディアクエリでは、フロートを削除し、widthとmargin：autoを指定する必要があります。たとえば、目的のメディアクエリのmax-widthで：

#activity {
    float:none;
    width:50%; /* or whatever you want it to be */
    margin:auto;
}

Bootstrap CSSの設定方法によって!importantは、上記のCSSの1つまたはすべてに追加して、そのメディアクエリポイントで実行したいことを確実に実行する必要がある場合があります。

また、その時点でactivity_textが自動的に下に表示されるかどうかもわかりませんでした。そのため、同じメディアクエリで機能するために必要なCSSは次のとおりです。

#activity_text {
    float:none;
    width:100%;
}
于 2012-11-11T05:42:27.890 に答える