问题我不能将DIV漂浮在另一个DIV旁边

Question

我正在努力让div坐在另一个div旁边，但我似乎无法弄明白。

我有一张图片projectLarge和一张div sideLargePicArea，（需要坐在图片旁边），但我尝试的所有内容都没有效果。我认为display: inline;或float: left;可以做到这一点，同时在float: left; div上放置projectLarge，但没有变化。

HTML：

 <section class="projectLarge">
        <img src="/images/common/1.jpg" width="100%" height="100%" />
             <article class="sideLargePicArea">
                <span class="smaller noTop">SMALLER</span>
                "Et af de mest markante transformationsprojekter i Danmark i nyere tid".
                <span class="smaller">SMALLER</span>
                "Et af de mest markante transformationsprojekter i Danmark i nyere tid".
             </article> 
    </section>

CSS：

/* The page sits inside a #container div */

#container {
    display: block; 
    max-width: 1320px;
    padding-left: 3vw;
}

/* */

.projectLarge {
    max-width: 1035px;
    margin: 0 5% 5% -3vw;
    float: left;    
}

.sideLargePic {
    float: left;
}

.smaller {
    font-size: 13px;
    margin: 5% 0 2% 0;
}

Answer 1

图像占据了100％的容器空间（.projectLarge），将.sideLargePicArea推到它下面。为了让它们并排坐着，你需要给它们各自的宽度并排放置。我会说使用一个百分比，所以当容器大小改变时，它们总是并排坐着。图像和文本容器（.sideLargePicArea）百分比应该合计为100％或更少。

此外，在文本容器（.sideLargePicArea）上使用填充，因此边距不会推动容器。在同一个笔记中，添加box-sizing：border-box;对所有元素。如果您对盒子大小不熟悉，请看一下这篇文章，它会在制作响应式布局https://css-tricks.com/box-sizing/时为您节省太多的麻烦。

* {
  box-sizing: border-box;
}
.projectLarge img {
  float: left;
  width: 50%;
  padding 100px;
}
.sideLargePicArea {
  font-size: 13px;
  padding: 20px;
  float: right;
  width: 50%;
}

<section class="projectLarge">
  <img src="http://placehold.it/350x350" />
  <article class="sideLargePicArea">
    <span class="smaller noTop">SMALLER</span>
    "Et af de mest markante transformationsprojekter i Danmark i nyere tid".
    <span class="smaller">SMALLER</span>
    "Et af de mest markante transformationsprojekter i Danmark i nyere tid".
  </article>
</section>

Answer 2

所以我让这个很容易，但你可以做一些定制。您可以将直接子项浮动到section所有内部的左侧。此外，img和article必须在该部分中有空间才能浮动，否则article将降至img以下。这就是我将两者都设置为width:40%;的原因。您可能会也可能不会选择这样做。

＆＃13;

＆＃13;

.projectLarge > *{
  float:left;
  border:1px solid red;
  width:40%;
}

＆＃13;

 <section class="projectLarge">
   <img src="/images/common/1.jpg" width="100%" height="100%" />
   <article class="sideLargePicArea">
     <span class="smaller noTop">SMALLER</span>
     "Et af de mest markante transformationsprojekter i Danmark i nyere tid".
     <span class="smaller">SMALLER</span>
     "Et af de mest markante transformationsprojekter i Danmark i nyere tid".
   </article> 
</section>

＆＃13;

＆＃13;

＆＃13;