Question

我正在寻找最简单的方法，让左侧的图标与右侧的两行文字对齐。

我正在努力解决的是我必须组织HTML的方式。我可以在功能上构建它，但我认为这样做效率不高/干净（代码太多）。所以关于如何解决这个问题的任何建议都非常感谢:)。我想要实现的截图如下。我正在使用Font Awesome和Bootstrap 3进行开发。

Screenshot of what I want to achieve

Answer 1

你的意思是这样的？只需更改使用的图像和文本，以及需要更改的内容

＆＃13;

.col-xs-12 {
  background-color: pink;
}

._imgContainer {
  position: relative;
}

._imgContainer>._icon {
  position: absolute;
  left: 50%;
  transform:translate(-50%,25%);
  width: 50px;
  height: 50px;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">

    <div class="col-xs-12">
      <div class="row">
        <div class="col-xs-2 _imgContainer">
          <image class="_icon" src="http://www.jqueryscript.net/images/jQuery-Plugin-For-Fullscreen-Image-Viewer-Chroma-Gallery.jpg" />
        </div>
        <div class="col-xs-10 _textContainer">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat..</p>
        </div>
      </div>
    </div>

  </div>
</div>

＆＃13;

Answer 2

＆＃13;

public class AuthenticatorDAOProxy {

  private DeviceDAO deviceDAO;

  public AuthenticatorDAOProxy(DeviceDAO deviceDAO) {
    this.deviceDAO = deviceDAO;
  }

  @UnitOfWork
  public Boolean checkIsDeviceValid(String deviceId, User user) {
    Device device = deviceDAO.getByDeviceIdAndUser(deviceId, user);
    if (device != null && device.getIsActive() == true) {
        return true;
    }
    return false;
  }
}

＆＃13;

.box{padding:10px; background:#7cc5ef;}

＆＃13;

Answer 3

只需将div显示添加到表格行

https://jsfiddle.net/q2x9sLo9/

地址

Mirpur New Bazar Road，Dhaka-12101

<div style="background-color:#00ced1;display: table-row;">
<i class="fa fa-envelope" style="float:left; padding:18px; background-color:#00ced1; color:white; font-size:40px"></i>
<div style="float:left; background-color:#00ced1; color:white;">
<h4>
E-mail
</h4><p>
example@info.com
</p>
</div>
</div>

<div style="background-color:#00ced1;display: table-row;">
<i class="fa fa-phone" style="float:left; padding:18px; background-color:#00ced1; color:white; font-size:59px"></i>
<div style="float:left; background-color:#00ced1; color:white;">
<h4>
Phone
</h4><p>
(732) 803-01 03
</p>
</div>``
</div>

如何获得一列包含一行和一列，其中两行嵌套在HTML / CSS中

3 个答案: