圍繞一個div一個浮動後下方瀏覽器的調整

Question

我有以下的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> 

，我使用bootrap爲containerpage-headerrow和span3/5以下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; 
} 

。當我調整瀏覽器下面的前300px #activity_text位置本身下面#activity這正是我想要的。

我正在使用媒體查詢，我希望在img下面定位自己的文本細分，讓img在文本上方居中並保留下面所有寬度（使用媒體查詢）的方式。

嘗試多種方法後，我不確定CSS是否能夠正常工作。感謝您的關注。看看附件。

注：更改背景的顏色，幫助注意到媒體查詢斷點

Answer 1

在特定媒體查詢你只需要刪除任何浮動，給它一個寬度&保證金：汽車。例如在您需要的媒體查詢最大寬度：

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

根據CSS如何引導是設置你可能需要添加!important到一個或所有的CSS的上面，以確保它做了你希望它在該媒體做什麼查詢點。

而且我不知道，如果activity_text在該點自動底下去了，所以這裏的你需要在爲同一個媒體查詢工作的CSS：

#activity_text { 
    float:none; 
    width:100%; 
}