如何在每张图片的右侧并排放置3张图片？ （混合泳）

Question

这是我想要实现的目标：

我正在尝试将3个图像与每个文本的右侧对齐，但似乎无法在Medley中正常工作。 另外，我必须内联编码任何CSS。

片段

 .img-valign { vertical-align: top; margin-bottom: 0.75em; } .text2 { font-size: 15px; } 

 <div> <img class="img-valign" src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <span class="text2"><a href="cnn.com"><strong><u>Restaurant 100</strong></u></a><br><span>This is some text this is some text this is some text. This is some text.</span> <img class="img-valign" src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <span class="text2"><a href="cnn.com"><strong><u>Restaurant 100</strong></u></a> <img class="img-valign" src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <span class="text2"><a href="cnn.com"><strong><u>Restaurant 100</strong></u></a> </div> 

Answer 1

您的HTML很乱，我清理了一下，删除了不必要的标签，然后使用display:flex

 body { margin: 0; } section { display: flex; } article { display: flex; flex: 1 } .img-valign { width: 50%; margin-right: 5px } div { width: 50% } a { font-size: 15px; font-weight: 700; display: block } 

 <section> <article> <img class="img-valign" src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <div><a href="cnn.com">Restaurant 100</a><span>This is some text this is some text this is some text. This is some text.</span> </div> </article> <article> <img class="img-valign" src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <div><a href="cnn.com">Restaurant 100</a><span>This is some text this is some text this is some text. This is some text.</span> </div> </article> <article> <img class="img-valign" src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <div><a href="cnn.com">Restaurant 100</a><span>This is some text this is some text this is some text. This is some text.</span> </div> </article> </section> 

Answer 2

1.内联块

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } a, div, img { display: inline-block; vertical-align: top; } .card { font-size: 15px; padding-right: 2%; width: 32%; } .card a { font-weight: bold; } .card div { width: 68%; } .card img { width: 30%; padding-right: 10px; } 

 <div class="card"> <img src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <div><a href="cnn.com">Restaurant 100</a> <br>This is some text this is some text this is some text. This is some text.</div> </div> <div class="card"> <img src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <div><a href="cnn.com">Restaurant 100</a> <br>This is some text this is some text this is some text. This is some text.</div> </div> <div class="card"> <img src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <div><a href="cnn.com">Restaurant 100</a> <br>This is some text this is some text this is some text. This is some text.</div> </div> 

2.浮动块+响应式布局

 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .card { font-size: 15px; } .card a { font-weight: bold; } .card img { float: left; max-width: 30%; padding-bottom: 20px; padding-right: 10px; } .card:after { clear: both; content: " "; display: table; } @media (min-width: 768px) { .card { float: left; padding-right: 20px; width: 33.33333333%; } } 

 <div class="card"> <img src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <a href="cnn.com">Restaurant 100</a> <div>This is some text this is some text this is some text. This is some text.</div> </div> <div class="card"> <img src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <a href="cnn.com">Restaurant 100</a> <div>This is some text this is some text this is some text. This is some text.</div> </div> <div class="card"> <img src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <a href="cnn.com">Restaurant 100</a> <div>This is some text this is some text this is some text. This is some text.</div> </div> 

Answer 3

1. 解决您的HTML问题（在<u>之前关闭<strong> <u> ）
2. 将div每一列包装起来（该div将包含图像和内容）
3. 将图像和内容制作为宽度为50％的浮动块（您可以根据自己的喜好设置不同的百分比）。

最终结果将如下所示：

 .triple > div { float: left; width: 33.33%; } .img-valign, .text2 { width: 50%; float: left; display: block; box-sizing: border-box; } .img-valign { vertical-align: top; margin-bottom: 0.75em; } .text2 { font-size: 15px; padding: 0 10px; } 

 <div class="triple"> <div> <img class="img-valign" src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <span class="text2"> <a href="cnn.com"><strong><u>Restaurant 100</u></strong></a> <br> <span>This is some text this is some text this is some text. This is some text.</span> </span> </div> <div> <img class="img-valign" src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <span class="text2"> <a href="cnn.com"><strong><u>Restaurant 100</u></strong></a> <br> <span>This is some text this is some text this is some text. This is some text.</span> </span> </div> <div> <img class="img-valign" src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <span class="text2"> <a href="cnn.com"><strong><u>Restaurant 100</u></strong></a> <br> <span>This is some text this is some text this is some text. This is some text.</span> </span> </div> </div> 

jsFiddle： https ://jsfiddle.net/azizn/3hghcscb/

Answer 4

修复HTML，将图像和内容包装在同一SPAN父级中。
浮动离开您的图像并使用flex

 html, body{margin:0;} .flex{ display: flex; } .flex > span{ flex: 1; } .flex img{ float:left; vertical-align:top; width:50%; } 

 <div class="flex"> <span> <img src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <a href="cnn.com"><strong><u>Restaurant 100</u></strong></a><br> <span>This is some text this is some text this is some text. This is some text.</span> </span> <span> <img src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <a href="cnn.com"><strong><u>Restaurant 100</u></strong></a> </span> <span> <img src="http://media.cmgdigital.com/shared/img/photos/2016/05/18/0d/5b/image.jpg" alt="" /> <a href="cnn.com"><strong><u>Restaurant 100</u></strong></a> </span> </div>