Question

在定位图像时遇到问题。看，我在一个div中创建了两列。每个都有50％的宽度。为什么图像不出现在第二列中，即使它有足够的空间？如何进入第二栏？进入<li ng-repeat="date in dateArr"> <span class="date">{{date | dateFormatter}}</span> </li>

JsFiddle：{{3}}

.imgDiv

* {
  margin: 0;
  padding: 0;
  border: 0;
}
body {} .container {
  width: 100vw;
  height: 100vh;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: lightblue
}
.content {
  text-align: center;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  min-height: 50vh;
  min-width: 70%;
}
.msgDiv {
  width: 50%;
}
.imgDiv {
  width: 50%;
}
.imgDiv img {
  width: 200px;
  height: 200px;
}

Answer 1

将此添加到.content：

display:flex;
align-items:center;

在这里摆弄：https://jsfiddle.net/awxsqLbc/1/

Answer 2

那是因为您将display: flex设置为.container，而不是.content

更新您的代码，它应该可以正常工作

Answer 3

我找到了解决问题的方法。您希望图片位于文本旁边。您应该尝试在CSS中使用float样式。这个解决方案比其他答案简单。

试试这个。它应该工作：

CSS：

 .container {
    width: 100vw;
    height: 100vh;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightblue
}
.content {
    text-align: center;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    min-height: 50vh;
    min-width: 70%;
}

.msgDiv {
  width: 50%;
  margin:0;
  float:left;
}

.imgDiv {
  width: 50%;
  float:right;
}

.imgDiv img {
  width: 200px;
  height: 200px;
}

HTML（与旧代码相同的HTML ）：

<div class="container">
<div class="content">

<div class="msgDiv">
<h1>Welcome.</h1>
<h2>Are you hungry?  </h2>
<h3>Start</h3>
</div>

<div class="imgDiv">
<img src="http://moderndogmagazine.com/sites/default/files/styles/blog_top_image/public/images/blogs/top_images/nb_seal_04_2.jpg?itok=DR7IOsFi" alt="" />
</div>

</div>
</div>

Answer 4

添加到您的列float:left;

.msgDiv {
  width: 50%;
  float: left;
}

.imgDiv {
  width: 50%;
  float: left;
}

即使img在一个单独的div中，它也不会显示出来

4 个答案: