如何更改在響應CSS

元素和控制流的順序我使用的骨架和這裏是響應式佈局，我想：如何更改在響應CSS

移動佈局 - 標題，圖片，描述所有在一個堆

桌面佈局 - 標題和描述圖像的右側

Mobile and Desktop Layouts

我應該如何結構中的HTML和CSS，以便響應式佈局可以從一個到另一個使用CSS和媒體改變僅查詢？我試圖浮動圖像在桌面佈局左側，使標題中移動佈局塊元素：

<div class="container"> 
<span class="date">10/1/2012</span> 
<span class="title">title</span> 
<img class="thumbnail" src="http://www.placehold.it/300x200"> 
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut nisl urna, posuere et tincidunt id, malesuada id libero. Sed vel neque tellus. Nulla et justo eu sapien accumsan eleifend eget id enim. Suspendisse sagittis, erat in mattis sagittis, dolor leo molestie nisi, eget cursus massa est at erat. 
</p> 
</div>

移動CSS

.title { 
    display:block; 
} 

.thumbnail { 
} 

.conatainer { 
width:320px; 
}

桌面CSS

.title { 
    position:relative; 
} 

.thumbnail { 
    float:left; 
} 

.conatainer { 
width:960px; 
}

這似乎大多數情況下工作，除非說明文字足夠長，而不是隻保留在右欄，否則描述會在照片底部的環繞照片的下方環繞。

，

我應該怎樣做，如果我使用骨架或responive網格系統之一，我應該用自己的列類？

來源

2012-10-01 MonkeyBonkey

您也可以在desktop.css樣式表的.description段落上設置float: left。這將使您的段落在自己的「專欄」中展開。

然後，記得結算也適用於.container元素

來源

2012-10-01 12:12:13 fcalderan

感謝，這樣做和寬度設置爲descrption元素的伎倆。 – MonkeyBonkey

如果您的容器寬度爲600px，圖片寬度爲300px，則只需將寬度設置爲300px或更低的段落爲 – fcalderan

另一個問題，我意識到我需要在另一行中標題的上方添加日期，如果我添加了元素在標題之上，並且有換行符會導致混亂。我可以在inline .title元素中包含塊元素嗎？我希望日期在桌面佈局中像圖片右側的標題一樣排列。 – MonkeyBonkey

如何更改在響應CSS

回答

相關問題