LINUX.ORG.RU
Форум — Web-development  

Как расположить 4 контейнера div рядом - «квадратом»

 ,


0

3

Красным выделено, то что у меня получилось:

https://pasteboard.co/HO9c3YT.png 

.main_div {
    display: flex;
    align-items: flex-start;
}
.bottom_div {
    display: flex;

}
.div2 {
    padding-left: 25px;
}


<div class="main_div">
    <img class="div1" src="img/div1.png" alt="DIV1">                
    <img class="div2" src="img/div2.png" alt="DIV2">                
</div>
<div class="bottom_div">
    <img class="div3" src="img/div3.png" alt="DIV3">                
    <img class="div4" src="img/div4.png" alt="DIV4">                
</div>
★★★★★

Последнее исправление: sniper21 (всего исправлений: 1)

Стоит начать с того, чтобы в html код добавить как минимум 4 дива. У вас пока только 1.

Я думаю дело в этом.

BaBL ★★★★★
()

Сделай вёрстку колоннами а не строками и для каждого элемента вертикальной колонны сделай нужную высоту.

temakonkin
()

Говнокод, рожденный на коленке за 15 мин. По-моему, по верстке нагуглить инфу очень просто, очень популярная тематика.

<div>
    <div style="width: 100%; height: 50%; float: left;">
        <div style="float: left; width: 50%;">[1]</div>
        <div style="float: left; width: 50%;">[2]</div>
    </div>
    <div style="width: 100%; height: 50%; float: left;">
        <div style="float: left; width: 50%;">[3]</div>
        <div style="float: left; width: 50%;">[4]</div></div>
    </div>
</div>

Virtuos86 ★★★★★
() 
table
	{
		width: 100%;
		height: 100%;
	}

tr
	{
		height: 33%;
	}

td
	{
		border: solid 5px #FF0000;
	}



<table>
	<tr>
		<td rowspan="2"></td>
		<td></td>
	</tr>
	<tr>
		<td rowspan="2"></td>
	</tr>
	<tr>
		<td></td>
	</tr>
</table>
И можешь валить других ребят из Виллабаджо в кваке. Или тебе обязательно так чтобы с ублюдочным говноcss посношаться?

h578b1bde ★☆
()

Как расположить 4 контейнера div рядом - «квадратом»

Красным выделено, то что у меня получилось

На твоей картинке у тебя 4 контейнера 1) находятся рядом и 2) образуют квадрат. Т.е. задача решена. Ты не можешь даже сформулировать что ты хочешь сделать? Удаляй тред и уходи.

thomasbug
()

так чтоли
https://codepen.io/anon/pen/OavXVM

<div style="height: 100px; width: 100px;">
    <div style="width: 50%; height: 100%; float: left;">
        <div style="float: left; width: 100%; height: 75%; border: 1px solid black;">[1]</div>
        <div style="float: left; width: 100%; height: 25%; border: 1px solid black;">[2]</div>
    </div>
    <div style="width: 50%; height: 100%; float: left;">
        <div style="float: left; width: 100%; height: 25%; border: 1px solid black;">[3]</div>
        <div style="float: left; width: 100%; height: 75%; border: 1px solid black;">[4]</div></div>
    </div>
</div>

kontranik ★
()

google://«Masonry» layout. Однако, может сейчас и появился css/html ony вариант.

anonymous
()
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.
Web-development