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

我正在为container page-header rowand使用引导程序span3/5。当我将浏览器的大小调整为 ex 300px 时#activity_text，它自己位于下面#activity，这就是我想要的。

我正在使用媒体查询，并且我希望将自身定位在 img 下方的文本分解时，让 img 在文本上方居中并在下面的所有宽度中保持这种方式（使用媒体查询）。

在尝试了多种方法之后，我不确定 CSS 是否能够完成这项工作。感谢您的关注。看看附件。在此处输入图像描述 在此处输入图像描述

注意：更改背景颜色以帮助注意媒体查询断点

4

1 回答 1

1

在特定的媒体查询中，您只需要删除任何浮动，给它一个宽度和边距：自动。例如在您想要的媒体查询最大宽度：

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

根据 Bootstrap CSS 的设置方式，您可能必须添加!important到上面的一个或所有 CSS 中，以确保它在该媒体查询点执行您希望它执行的操作。

此外，我不确定 activity_text 是否在那时自动进入下方，所以这是您在同一个媒体查询中需要的 CSS 才能工作：

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