如何在文本旁邊對齊圖像然後堆疊它們（響應）

如何編寫HTML和CSS以使圖像靠近文本（每邊交替排列），然後將它們疊放在另一個之上用於響應式視圖如何在文本旁邊對齊圖像然後堆疊它們（響應）

.row { 
 
    display: block; 
 
    width: 100%; 
 
} 
 
.container { 
 
    display: inline-block; 
 
} 
 
.left { 
 
    float: left; 
 
} 
 
.right { 
 
    float: right; 
 
}

<div class="row"> 
 
    <img class="right" src="" width="300" height="300" /> 
 
    <div class="container"> 
 

 
    <h1>Heading</h1> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mollis magna nunc, a condimentum mauris ultrices vel. Pellentesque lobortis, neque ut rutrum vehicula, turpis quam tincidunt nisl, a placerat est justo vitae nibh. Fusce eleifend varius 
 
     lorem et vulputate. Nullam pellentesque metus eros, et pretium mauris placerat nec. Suspendisse at est at enim condimentum dapibus. Vivamus eu cursus tellus, nec aliquam sapien. Proin feugiat diam sed nibh varius interdum. Sed aliquam lorem vel 
 
     nulla posuere, feugiat porttitor tortor lobortis. Cras imperdiet bibendum enim efficitur laoreet.</p> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 
    <div class="container"> 
 

 
    <h1>Heading</h1> 
 

 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mollis magna nunc, a condimentum mauris ultrices vel. Pellentesque lobortis, neque ut rutrum vehicula, turpis quam tincidunt nisl, a placerat est justo vitae nibh. Fusce eleifend varius 
 
     lorem et vulputate. Nullam pellentesque metus eros, et pretium mauris placerat nec. Suspendisse at est at enim condimentum dapibus. Vivamus eu cursus tellus, nec aliquam sapien. Proin feugiat diam sed nibh varius interdum. Sed aliquam lorem vel 
 
     nulla posuere, feugiat porttitor tortor lobortis. Cras imperdiet bibendum enim efficitur laoreet.</p> 
 
    </div> 
 
    <img class="left" src="" width="300" height="156" /> 
 
</div>

請幫我在這裏stucked了很長的時間。 [鏈接到有問題的圖像] [1] [元素的定位] [1]

圖像的元素：hudicek [點] SI/CSS [點] JPG

來源

2014-11-01 Peter Pupovac

檢查。

http://jsfiddle.net/e7e1bhdd/

不要忘記使用

clear: both;

浮動

來源

2014-11-01 22:23:34 DasBoot

感謝的人後。就是這樣。也許最小寬度的容器？那麼這個段落不會變薄？或者你願意解決媒體查詢？ – 2014-11-01 22:50:32

你是什麼意思，太瘦？ – DasBoot 2014-11-02 11:31:05

在傳遞給媒體查詢之前，我被困在垂直對齊中......以下是實際網站：[link]（http://dev.dashbox.si/kaj-je-dashbox）/ Fiddle [link]（http ：//jsfiddle.net/Adrenaline22/gq9gmr7k/）。我無法將文本+標題與浮動圖像居中。 – 2014-11-02 15:20:32

如何在文本旁邊對齊圖像然後堆疊它們（響應）

回答

相關問題