Question

我有一个我在fiddle中复制的屏幕截图。此时，我能够复制所有内容，但图像和文本仍然需要在一列中垂直对齐。

为了复制屏幕截图，HTML代码的片段是：

<div class="achievement1">
    <img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118">
    <a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"How I Turned $1,200 into Multi-Million Dollar Businesses"</a>
    <a href="https://www.businessnewsdaily.com/">- Business News Daily</a>
</div>

我已经创建了一个父div成就课，其中我已经放置了三个孩子成就div类。

问题陈述：我想知道我应该在CSS部分添加什么CSS代码，以便文本出现在列中，图像会出现在另一列中，如屏幕截图所示。

我尝试使用 display：inline-block 和 display：block ，但我仍然无法将图片和文字放在一列中。

Answer 1

检查大多数浏览器是否支持：

＆＃13;

img {
  display: block;
  float: left;
  clear: right;
}

.achievement3,
.achievement2,
.achievement1 {
  width: 100%;
  display: inline-block;
  margin: 10px auto;
}

＆＃13;

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Testing</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>

<body>
  <div class="achievements">
    <div class="achievement1">
      <img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"><br> <a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"How I Turned $1,200 into Multi-Million Dollar Businesses"</a><br>      <a href="https://www.businessnewsdaily.com/">- Business News Daily</a>
    </div>
    <div class="achievement2">
      <img class="alignleft size-full wp-image-7501" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"><br> <a style="color: black;" href="https://www.globalfranchisemagazine.com/advice/case-study/revolutionize-your-franchising">"Revolutionize Your Franchise "</a><br>      <a href="https://www.globalfranchisemagazine.com/">- Global Franchise Magazine</a>
    </div>
    <div class="achievement3">
      <img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"><br> <a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"Introduces Franchise Community to BPro Platform"</a><br>      <a href="http://www.franchiseharbor.com/">- Franchise Harbor</a>
    </div>
  </div>
</body>

</html>

＆＃13;

Answer 2

CSS Flexbox 和有效标记，您可以轻松完成此操作

＆＃13;

  .achievement1 {
  display: flex;
  align-items: center;
}

.caption {
  margin-left: 30px;}
  .caption a {
    display: block;
    padding-bottom:5px;
  }

＆＃13;

<div class="achievement1">
  <div class="figure">
    <img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"></div>
  <div class="caption">
    <a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"How I Turned $1,200 into Multi-Million Dollar Businesses"</a>
    <a href="https://www.businessnewsdaily.com/">- Business News Daily</a>
  </div>
</div>

＆＃13;

Answer 3

在你的css中：

.achievement1,
.achievement2,
.achievement3 {
   display: flex;
   align-items:center;
}

在您的代码段中，删除br元素后的image并添加div以包装文字

<div class="achievement1">
    <img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118">
        <div>
            <a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"How I Turned $1,200 into Multi-Million Dollar Businesses"</a>
            <a href="https://www.businessnewsdaily.com/">- Business News Daily</a>
        </div>
</div>

这是更新的小提琴：https://jsfiddle.net/0rzx731r/16/

Answer 4

您尚未为alignleft标记中的img类添加样式。将float: left添加到该类，它可以正常工作。

.achievement1 {
  display: inline-block;
}

.alignleft {
  float: left;
}

    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="achievements">
<div class="achievement1">
<img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"><a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"How I Turned $1,200 into Multi-Million Dollar Businesses"</a><br> <a href="https://www.businessnewsdaily.com/">- Business News Daily</a>
</div>
<div class="achievement1">
<img class="alignleft size-full wp-image-7501" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"><a style="color: black;" href="https://www.globalfranchisemagazine.com/advice/case-study/revolutionize-your-franchising">"Revolutionize Your Franchise "</a><br> <a href="https://www.globalfranchisemagazine.com/">- Global Franchise Magazine</a>
</div>
<div class="achievement1">
<img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"><a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"Introduces Franchise Community to BPro Platform"</a><br> <a href="http://www.franchiseharbor.com/">- Franchise Harbor</a>
</div>
</div>

由于您已经在使用bootstrap，因此您可以使用bootstrap的网格系统，这样可以更轻松。

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="achievements">
<div class="row">
<div class="col-sm-3"><img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"></div>
<div class="col-sm-9"><a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"How I Turned $1,200 into Multi-Million Dollar Businesses"</a><br> <a href="https://www.businessnewsdaily.com/">- Business News Daily</a></div>
</div>
</br>
<div class="row">
<div class="col-sm-3"><img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"></div>
<div class="col-sm-9">
<a style="color: black;" href="https://www.globalfranchisemagazine.com/advice/case-study/revolutionize-your-franchising">"Revolutionize Your Franchise "</a><br> <a href="https://www.globalfranchisemagazine.com/">- Global Franchise Magazine</a></div>
</div>
</br>
<div class="row">
<div class="col-sm-3"><img class="alignleft size-full wp-image-7492" src="https://s31.postimg.cc/3nkv5hy7f/rsz_31944265_10214037958016144_5257718905849249792_n.png" alt="" width="161" height="118"></div>
<div class="col-sm-9"><a style="color: black;" href="https://www.businessnewsdaily.com/9928-steve-cody-the-better-software-company.html">"Introduces Franchise Community to BPro Platform"</a><br> <a href="http://www.franchiseharbor.com/">- Franchise Harbor</a></div>
</div>
</div>

在css中垂直对齐图像和文本

4 个答案: