如何将3张图像并排放置在每张图像的右侧？ （混合式）

Question

这就是我想要实现的目标：

我正在尝试将3个图像与文本对齐，但每个图像的右侧似乎都无法让它在Medley中运行。另外，我必须编写任何内联css代码。

代码段

＆＃13;

＆＃13;

following_user_ids = user.following.pluck(:id)
contact_user_ids = Relationship.where(status: "contact", follower_id: user.id).pluck(:follower_id)

Microposts.where("(visible_for = 'followers' and user_id in (?)) OR (visible_for = "contacts" and user_id in (?)"), following_user_ids, contact_user_ids))

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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。内联块

＆＃13;

＆＃13;

* {
  -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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

2。浮动块+响应式布局

＆＃13;

＆＃13;

* {
  -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%;
  }
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

1. 修复您的HTML问题（在<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父级中 Float留下您的图片并使用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>