2圖像右側的文本的列布局摺疊爲1列，上面和下面都有文本？

我有一個響應流體寬度的網站。對於一個部分，我有一個標題，文字和圖像。2圖像右側的文本的列布局摺疊爲1列，上面和下面都有文本？

對於較大的顯示器，我需要標題和文本坐在圖像的右側。對於較小的顯示器，我希望首先使用標題的單個列。（見圖片）

enter image description here

<div class="cont"> 
    <h1>Here is Title</h1> 
    <div class="img"></div> 
    <p>Some text</p> 
</div> 

.cont { 
    background: grey; 
    width: 30%; 
    margin: auto; 
} 
.img { 
    height: 200px; 
    width: 200px; 
    background: blue; 
}

這是佈局可能嗎？由於支持的原因，我不能使用flexbox。

http://codepen.io/anon/pen/JoYMoX

來源

2014-12-02 Evans

使用媒體查詢本 – Danield 2014-12-02 15:12:30

即使媒體查詢我不知道如何來實現佈局，或者如果它甚至有可能（沒有像絕對定位）。 – Evans 2014-12-02 15:14:22

我會使用您當前的CSS作爲較小屏幕的默認值，然後使用媒體查詢來調整較大屏幕的佈局。您可能必須使用絕對定位。

對於示例：

@media only screen and (min-width: 720px) { 
    .img { 
    position: absolute; 
    top: 0; 
    left: -200px; 
    } 
    .cont { 
    margin-left: 200px; 
    position: relative; 
    } 
}

編輯 - 選擇對象不絕對定位：

正如我在評論中提到的，你也可以放置在內容的圖像兩次，然後只需用媒體查詢隱藏一個。不理想，但至少瀏覽器應該只下載一次圖像。

因此，例如：

.cont-wrap { 
 
    background: grey; 
 
    width: 60%; 
 
    margin: auto; 
 
    overflow: hidden; 
 
} 
 
.cont { 
 
    float: left; 
 
} 
 
.img { 
 
    height: 200px; 
 
    width: 200px; 
 
    background: blue; 
 
} 
 
.left { 
 
    display: none; 
 
    float: left; 
 
} 
 
@media only screen and (min-width: 720px) { 
 
    .img { 
 
    display: none; 
 
    } 
 
    .img.left { 
 
    display: block; 
 
    } 
 
}

<div class="cont-wrap"> 
 
    <div class="img left"></div> 
 
    <div class="cont"> 
 
    <h1>Here is Title</h1> 
 
    <div class="img"></div> 
 
    <p>Some text</p> 
 
    </div> 
 
</div>

來源

2014-12-02 15:16:04 pschueller

我真的不想使用絕對定位。它不是針對具有動態內容的響應式網站的可靠解決方案。 – Evans 2014-12-02 15:18:35

不確定如果沒有絕對定位這是可能的，圖像需要退出常規內容的流程......替代方案可能是將圖像放在左側和內容中，然後根據需要隱藏圖像（瀏覽器應該只下載一次）。 – pschueller 2014-12-02 15:31:01

例如：http://codepen.io/anon/pen/XJmVMm – pschueller 2014-12-02 15:41:43

與引導就可以使用偏移參數上，並拉或推訂單。您可以使用媒體查詢設置的位置絕對... @media all和（max-width：768px）{ .title {position：absolute; top：0;左：0;

或寬度：100％;向左飄浮; ...} .bluebox {width：100％; margin-top：20px;}}

來源

2014-12-02 15:15:19

2圖像右側的文本的列布局摺疊爲1列，上面和下面都有文本？

回答

相關問題