在響應式設計中使用浮動的問題定位元素

我在響應式網站上工作，而且我在佈局上遇到了一些麻煩。我把問題分解到了儘可能少的線上。在響應式設計中使用浮動的問題定位元素

當窗口大於909px時，我想將第二個內容（content2）放在標題下方。當可用空間較少時，我希望它放在圖像下方。

目前它總是被放置在圖像下方。

Here的視覺效果。

我需要找到一個解決方案，而不使用絕對定位，因爲標題沒有固定的高度。事實上，我的html元素都沒有固定的高度，但我確實有固定的寬度。

我一直在試圖想出一個簡單的解決方案几個小時了。希望有人能指出我的方向:)

感謝您的閱讀！

HTML代碼：

<div class="wrapper"> 
    <h1> some title </h1> 
    <div class="image"> some img</div> 
    <div class="content1"> some content </div> 
    <div class="content2"> some other content </div> 
</div>

CSS樣式：

.content1{ 
    float: left; 
} 
.image{ 
    width: 600px; 
} 
.content2{ 
    width: 300px; 
    float: right; 
} 

@screen and (min-width: 768px) and (max-width: 909px){ 
    .wrapper { 
    width: 700px; 
    } 
    .content1 { 
    width: 300px; 
    } 
} 

@screen and (min-width: 909px){ 
    .wrapper { 
    width: 900px; 
    } 
    .content1{ 
    width: 600px; 
    } 
}

來源

2013-05-22 gessert

這不是2005年停止使用花車爲您的佈局。 –

@AlexW - 使用浮動塊有什麼問題？ – j08691

@ j08691他使用它來佈局塊元素，這可以很容易地使用內聯塊來完成，而不需要明確修正等。 –

這裏是做它的min-width: 909px

的CSS的情況下的一種方法是：

@media screen and (min-width: 909px) { 
    .wrapper { 
     width: 900px; 
     outline: 1px dotted blue; /* optional for demo */ 
    } 
    .image { 
     width: 600px; 
     float: left; 
     outline: 1px dotted blue; /* optional for demo */ 
    } 
    .content1 { 
     float: left; 
     width: 600px; 
     outline: 1px dotted blue; /* optional for demo */ 
    } 
    .content2 { 
     width: 300px; 
     margin-left: 600px; 
     outline: 1px dotted blue; /* optional for demo */ 
    } 
}

和演示小提琴是：http://jsfiddle.net/audetwebdesign/WfyJL/

我沒有看到任何的高度，所以我認爲內容將確定元素的不同高度。

如何工作

在以前的例子中，content2被浮置，從而其頂部邊緣旁邊放置到最近的，相鄰的塊級元素，這是image的底部邊緣。

爲了得到所希望的佈局爲900px格式，浮動image到左邊，並保持content2在流動但有600px的左邊距，以允許左浮動元素流下來的content2左手側。

來源

2013-05-22 16:29:39

也許你需要使用一些類似這樣的，有偏差，希望你的幫助

<div id="wrapper"> 
     <div class="row-fluid"> 
     <div class="span4"> 
      <h1> some title </h1> 
     </div> 
     <div class="span4"> 
      <div id="image"> some img</div> 
      <div id="content1"> some content </div> 
     </div> 
     </div> 
     <div class="span8 offset5"> 
      <div id="content2"> some other content </div> 
     </div> 
    </div>

來源

2013-05-22 16:30:47

看起來像bootstrap，你認爲哪個CSS框架？ –

哦，我的錯誤，即時通訊認爲你正在使用bootstrap –

在響應式設計中使用浮動的問題定位元素

回答

相關問題