Question

我正在尝试解决2个问题：

当我将窗口水平缩放时，左侧的图像（sideImage）将不会与文本框垂直对齐。我已经尝试过使用margin-top auto和margin-bottom auto，但这似乎没有用。
当我垂直缩小窗口时，顶部div会消失在顶部。（我不知道为什么会这样）

我正在使用Bootstrap btw，所以请记住这一点。

/*-- CSS --*/

* {
  background-color: rgba(0, 0, 0, 0.1);
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
}

.page2Box {
  float: left;
  display: inline-block;
  clear: both;
}

.sideImage {
  margin-top: auto !important;
  margin-bottom: auto !important;
}

.mainImage {
  float: right;
  margin-top: auto !important;
  margin-bottom: auto !important;
}

p {
  height: 180px !important;
  overflow: hidden;
}

<!DOCTYPE html>
<html>

<head>
  <title>Page2_Bootstrap</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid bigBox col-md-8">
    <div class="container page2Box col-md-12" id="box1">
      <h2 class="col-md-5">Main Goal</h2>
      <p class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices urna in dui laoreet rhoncus. Vestibulum posuere mollis velit. Morbi elementum placerat erat.</p>
    </div>
    <div class="container page2Box col-md-4" <div class="container page2Box col-md-12" id="box2">
      <img class="image-responsive sideImage col-md-4" src="placeholder.png">
      <h2 class="col-md-5">Who We Are</h2>
      <p class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices urna in dui laoreet rhoncus. Vestibulum posuere mollis velit. Morbi elementum placerat erat.</p>
    </div>
    <div class="container page2Box col-md-12" id="box3">
      <img class="image-responsive sideImage col-md-4" src="placeholder.png">
      <h2 class="col-md-5">What We Do</h2>
      <p class="col-md-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ultrices urna in dui laoreet rhoncus. Vestibulum posuere mollis velit. Morbi elementum placerat erat.</p>
    </div>
  </div>
  <image class="image-responsive col-md-4 mainImage" src="placeholder.png">
</body>

</html>

这是它的样子。

以下是问题所在。

Answer 1

我建议在将图像和文本嵌套在单独的div中时使用flex-box选项。即。

HTML：

<div class="container">
    <div class="row equal">
        <div class="col-md-6 col-sm-6">
            <div class="box">
                <img class="image-responsive" src="http://via.placeholder.com/350x150" />          
            </div>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="box">
                <h2>Main Goal</h2>
                <p>In iaculis elit id odio malesuada, vitae euismod dui viverra. Maecenas pulvinar quis magna in dapibus. Ut eget elit eget nibh eleifend ultricies a a orci. Aliquam tristique nulla eu sapien posuere egestas. </p>
            </div>
        </div>
    </div>
</div>

CSS：

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
  border: 1px solid #333;
}

JSFiddle：https://jsfiddle.net/Jabideau/rkzafmrb/

使文本框的大小与图像相同

1 个答案: