html - 如何修复这个界面（简单的html/css）

Question

这是我的界面

我有两个块div.small（包括 4 篇小文章）和article.big. 我希望大块在小块的右侧，但它在下面。

*{
font-family: tahoma;
}

div.all{
    height: 528px;
    width: 824px;
}
article.small{
    width: 312px;
    height: 82px;
}
div.small{
    float: left;
}
img.smallimg{
    float: left;
    width: 121px;
    height: 82px;
}
article.big{
    width: 496px;
    height: 525px;
}
img.bigimg{
    width: 494px;
    height: 329px;
}

<div class="all">
<div class="small">
<article class="small">
    <a href=""><img src="small01.jpg" alt="" class = "smallimg"></a>
    <a href="" class="samlllink">Link 01</a>
</article>

<article class="small">
    <a href=""><img src="small02.jpg" alt="" class="smallimg"></a>
    <a href="" class="samlllink">link 02</a>
</article>

<article class="small">
    <a href=""><img src="small03.jpg" alt="" class="smallimg"></a>
    <a href="" class="samlllink">link03</a>
</article>

<article class="small">
    <a href=""><img src="small04.jpg" alt="" class="smallimg"></a>
    <a href="" class="samlllink">link04</a>
</article>

<article class="small">
    <a href=""><img src="small02.jpg" alt="" class="smallimg"></a>
    <a href="" class="samlllink">link05</a>
</article>
</div>

<article class="big">
    <a href=""><img src="big.jpg" alt="" class="bigimg"></a>
    <a href="" class="biglink">big link</a>

</article>
</div>

我试图div.all用 height = 528px 来限制，但是，article.big应该在右边，但事实并非如此。我的问题是：为什么我的方式错了？

标签： htmlcss

Answer 1

注意浮动（冗余）的删除和添加display: flex默认情况下在子元素中显示为一行。你的大 div 在下面的原因是因为div默认情况下使用的元素是块级元素。如果他们是，inline-block他们也会并排排列。干杯!

*{
font-family: tahoma;
}

div.all{
    height: 528px;
    width: 824px;
    display: flex;
}
article.small{
    width: 312px;
    height: 82px;
}

img.smallimg{
    width: 121px;
    height: 82px;
}
article.big{
    width: 496px;
    height: 525px;
}
img.bigimg{
    width: 494px;
    height: 329px;
}

<div class="all">
<div class="small">
<article class="small">
    <a href=""><img src="small01.jpg" alt="" class = "smallimg"></a>
    <a href="" class="samlllink">Link 01</a>
</article>

<article class="small">
    <a href=""><img src="small02.jpg" alt="" class="smallimg"></a>
    <a href="" class="samlllink">link 02</a>
</article>

<article class="small">
    <a href=""><img src="small03.jpg" alt="" class="smallimg"></a>
    <a href="" class="samlllink">link03</a>
</article>

<article class="small">
    <a href=""><img src="small04.jpg" alt="" class="smallimg"></a>
    <a href="" class="samlllink">link04</a>
</article>

<article class="small">
    <a href=""><img src="small02.jpg" alt="" class="smallimg"></a>
    <a href="" class="samlllink">link05</a>
</article>
</div>

<article class="big">
    <a href=""><img src="big.jpg" alt="" class="bigimg"></a>
    <a href="" class="biglink">big link</a>

</article>
</div>