Question

我目前正在开发自己的网站。第一个div容器将图像集成到html。具有类名“face”的第二个div应该直接显示在图像下方。它包含具有预定义宽度和高度的文本。

现在问题：它没有显示在图像div的右侧。我怎样才能在右侧显示它？

.face {
  text-align: center;
  background-image: linear-gradient(rgb(0, 21, 166), #115FD8);
  border-radius: 5px;
  width: 240px;
  height: 80px;
  margin-right: 0 !important;
}
.start {
  margin-right: 10px;
}
.postpreview {
  position: relative;
  width: auto;
}
.one-half {
  float: left;
  width: 48.717948717948715%;
  margin-left: 2.564102564102564%;
}

<div class="one-half start postpreview">
  <a href="#">
    <img src="http://vocaloid.de/wp-content/uploads/2015/02/KAITO-6th-anniversary-2015-Project-DIVA-Arcade-Diamond-Dust-750x256.jpg" class="attachment-Beitragsbild wp-post-image">
  </a>
</div>



<div class="face"><a href="http://vocaloid.de/out/vbrasil" rel="nofollow" target="_blank">Facebook</a>
</div>

Answer 1

这应该有所帮助。 http://jsfiddle.net/13m3vbu1/3/

插入你的css：

.face {
    text-align: center;
    background-image: linear-gradient(rgb(0, 21, 166), #115FD8);
    border-radius: 5px;
    width: 240px;
    height: 80px;
    float: left;
    margin-right: 0 !important;
}
.one-half {
    float: left;
    width: 48.717948717948715%;
    margin-left: 2.564102564102564%;
    margin-right: 10px;
}
.one-half > a {
    display: block;
    width: 100%;
    overflow: hidden;
}

我删除了不需要的冗余CSS。

Answer 2

如果你只想在div的右侧显示具有类面的div使用float：left而不是使用.face中的像素使用百分比它更灵活

<强> CSS

.one-half {
     float:left;
     width: 45%; //adjust in what % you want
     display: inline;
}
.face {
     float: left;
     width: 45%; //adjust in what % you want
     display: inline;
}

如何在另一个div旁边显示div？

2 个答案: