如何模仿此佈局

我目前正在嘗試使用HTML/CSS來模仿此佈局。附件是它應該在桌面和移動設備上看起來的樣子。對於手機來說，我不是100％確定這是最好的方法。注意圖像在「Bowers & Wilkins」之前。如何模仿此佈局

佈局是100％瀏覽器寬度btw。我最初的想法是使用柔性盒來做這件事......但我不能100％確定它是否是正確的方法。我目前對使用彈性盒很新穎。

2017-06-15 Karth

您可以查看HTML和CSS在你的瀏覽器，看看他們是如何做到這一點。 – Nath

在這種情況下，這是一個發送給我的圖像在Photoshop中創建。 – Karth

你想看看響應式設計。先從最小的屏幕開始。它看起來你應該考慮一個容器，然後在容器內部的三個部分或div。一個用於獨家訂單，一個用於img，另一個用於文本。然後使用媒體查詢來翻轉css中的佈局。如果你只是想使用圖像，你可以用一個這樣做，並在不同的屏幕尺寸更改CSS的IMG。 – DCR

最簡單的方法很可能是將圖像浮在桌面資源的權利（在演示一列最初顯示當您運行下面的代碼片段 - 有效地移動資源。如果切換到整頁模式，你應該看到的元素順序變化，使圖像浮動到右）：

body { 
 
    font-family: Arial, sans-serif; 
 
    background-color: #aaa; 
 
    padding: 1em; 
 
    font-size: 14px; 
 
} 
 

 
h1, 
 
h2, 
 
p { 
 
    margin: 0; 
 
    color: #fff; 
 
} 
 

 
/* float image to the right, half the width of the viewport */ 
 
img { 
 
    float: right; 
 
    margin-left: 1em; 
 
    width: 50vw; 
 
} 
 

 
h1 { 
 
    font-size: 1.25em; 
 
    font-weight: normal; 
 
} 
 

 
h2 { 
 
    text-transform: uppercase; 
 
    font-size: 1em; 
 
} 
 

 
@media only screen and (max-width: 767px) { 
 
    /* at mobile res, remove the float so the image appears back between the headings */ 
 
    img { 
 
    float: none; 
 
    margin-left: 0; 
 
    margin-bottom: .75em; 
 
    } 
 
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css" /> 
 

 
<h1>Exclusive offers from our partners</h1> 
 
<img src="http://lorempixel.com/output/technics-q-c-200-200-4.jpg" /> 
 
<h2>Bowers &amp; Wilkins</h2> 
 
<p>It's one thing to dress well for your party. It's another thing to host it well ...</p>

來源

2017-06-15 23:42:36 Conan

我肯定會推薦bootstrap作爲一個很好的解決方案。他們有預先構建的CSS類，可以自動地拉和推這樣的對象。

這裏的類是類= 「COL-MD-6 COL-MD-推6」和class = 「COL-MD-6 COL-MD-拉6」

來源

2017-06-15 23:51:41 Dan

如何模仿此佈局

回答

相關問題