问题，我不能浮动一个DIV旁边另一个DIV

我挣扎着让div坐在另一个div旁边，但我似乎无法弄清楚。问题，我不能浮动一个DIV旁边另一个DIV

我有一个图片projectLarge，和一个div sideLargePicArea，（这需要图片旁边坐），但一切我都试过没有奏效。我以为display: inline;或float: left;会做的伎俩，也放在projectLarge div float: left;，但没有变化。

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; 
}

来源

2017-02-09 davvv

所以我做了这个难不倒我，但你可以做一些定制。您可以将section以内的直接子女全部移动到左侧。此外，img和article必须在该部分有空间浮动，否则article将下降到img以下。这就是我为什么要设置为width:40%;。你可能会也可能不会选择这样做。

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

<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>

来源

2017-02-09 16:00:08

非常感谢哉！那么，所有漂浮的DIVS都需要附加一个宽度，以便它们可以正确地漂浮？ – davvv

当一个元素被浮动时，它将获取其内容的宽度。有时候这个宽度太大了，所以我强制它。 –

图像被占用容器空间（.projectLarge）的100％，推.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>

来源

2017-02-09 16:19:06

问题，我不能浮动一个DIV旁边另一个DIV

回答

相关问题