如何在文本旁边对齐图像然后堆叠它们（响应）

如何编写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

如何在文本旁边对齐图像然后堆叠它们（响应）

回答

相关问题