как исправить интерфейс этого (простой html/css)

avatar
dangthaii
9 августа 2021 в 01:17
133
2
0

вот мой интерфейс here is my interface

У меня есть два блока 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 высотой = 528 пикселей, однако article.big должен был быть справа, но это не так. Мой вопрос: почему я ошибаюсь?

Источник
Maggie Cody
9 августа 2021 в 01:21
1

Вы можете попробовать добавить «float: left» в свою статью.

Ответы (2)

avatar
Chris W.
9 августа 2021 в 01:33
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>
avatar
Huy Phạm
9 августа 2021 в 01:36
0

Вы этого хотите? Никаких сложных display: flex; не требуется

*{
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;
    position: absolute;
    top:0;
    right:0;
}
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>
Chris W.
9 августа 2021 в 01:37
0

Использование absolute начнет усложняться, когда ширина области просмотра изменится, а «большой» элемент div перекроет левое содержимое. Просто к вашему сведению

Huy Phạm
9 августа 2021 в 01:38
0

@КрисВ. Это совершенно верно. Но все, что я вижу, это фиксированные heights и widths

Chris W.
9 августа 2021 в 01:41
0

Да, но когда вы указываете здесь absolute, родительская позиция relative является окном в любом случае, поэтому, когда это absolute, оно удаляется из обычного потока DOM, и эти жестко заданные ширины не соблюдаются, за исключением элементов, которые они применяется, откройте полную страницу вашего примера и сузьте ширину окна, чтобы увидеть, что я имею в виду.