隨着屏幕尺寸縮小，將左側元素移動到右側元素

想要在左側顯示右側帶有文本的圖像。隨着屏幕寬度減小，要將左側圖像移動到右側文本下方。隨着屏幕尺寸縮小，將左側元素移動到右側元素

試過這個表格。可以在文字上方顯示圖像，但不能在下方顯示。與DIV嘗試了幾個不同的東西，並沒有一個能正常工作。

HTML：

<h2>Method 1</h2> 
<table class="table"> 
<tr> 
    <th><img src="http://placehold.it/240x320/f00/000.png&text=100x100" width="100" height="100" /></th> 
    <td>blah blah blah</td> 
</tr> 
<tr> 
    <th><img src="http://placehold.it/240x320/0f0/000.png&text=100x120" width="100" height="120" /></th> 
    <td>another line of text</td> 
</tr> 
</table> 

<h2>Method 2</h2> 
<div> 
    <div class="right-or-top">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</div> 
    <div class="left-or-bottom"><img src="http://placehold.it/240x320/f00/000.png&text=100x100" width="100" height="100" /></div> 
</div> 
<div> 
    <div class="right-or-top">Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah</div> 
    <div class="left-or-bottom"><img src="http://placehold.it/240x320/0f0/000.png&text=100x120" width="100" height="120" /></div> 
</div>

CSS：

.table, .table td, .table th, div { 
    border: 1px solid black; 
} 
@media (max-width: 767px) { 
    .table, thead, tbody, th, td, tr { 
     display: block; 
    } 
    .table tbody > tr > th { 
     border-top: none; 
     padding: 0; 
     text-align: center; 
     margin: 0 auto; 
    } 
} 

.left-or-bottom { 
    display: inline-block; 
    width: 110px; 
} 
.right-or-top { 
    display: inline-block; 
    margin-left: 120px; 
} 
@media (max-width: 767px) { 
    .left-or-bottom { 
     display: block; 
     width: 100%; 
     text-align: center; 
    } 
    .right-or-top { 
     display: block; 
     width: 100%; 
     margin-left: 0; 
    } 
}

也想聲明有此頁面上有很多其他的事情對雙方...這使得絕對定位困難。也期待避免一個javascript解決方案。

來源

2015-10-04 Mike

我想最簡單的方法是爲文本創建兩個不同的元素。第一個將在圖像上方，另一個在圖像右側。而且你要根據屏幕大小

例如隱藏的每個元素：

@media (min-width: 767px) { 

.rightToTop1 { 
    display:none; 
    border-top: none; 
    padding: 0; 
    text-align: center; 
    margin: 0 auto; 
} 
.rightToTop2 { 
    display:block; 
    border-top: none; 
    padding: 0; 
    text-align: center; 
    margin: 0 auto; 
} 
} 
@media (max-width: 767px) { 

.rightToTop1 { 
    display:block; 
    border-top: none; 
    padding: 0; 
    text-align: center; 
    margin: 0 auto; 
} 
.rightToTop2 { 
    display:none; 
    border-top: none; 
    padding: 0; 
    text-align: center; 
    margin: 0 auto; 
}

和HTML：

<div class="right-or-top1">Blah Blah Blah Blah Blah Blah Blah</div> 
<div class="left-or-bottom"><img src="sample.jpg"/></div> 
<div class="right-or-top2">Blah Blah Blah Blah Blah Blah Blah</div>

來源

2015-10-04 18:20:16

隨着屏幕尺寸縮小，將左側元素移動到右側元素

回答

相關問題