Вопрос стиля CSS div - PullRequest
Новая
       4

Вопрос стиля CSS div

1 голос
/ 21 апреля 2010

Какой правильный код для этого?

image

в коде стиля div. Я знаю, как использовать float, но только 2 делит. Но в 4 деления я не знаю.

Ответы [ 4 ]

4 голосов
/ 21 апреля 2010

Просто float все они left и при необходимости добавьте right margin из -1px, чтобы границы хорошо перекрывались. Вот SSCCE , просто скопируйте и запустите его: 

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2684578</title>
        <style>
            .box {
                float: left;
                width: 100px;
                height: 100px;
                margin-right: -1px;
                border: 1px solid black;
            }
        </style>
    </head>
    <body>
        <div class="box">box1</div>
        <div class="box">box2</div>
        <div class="box">box3</div>
        <div class="box">box4</div>
    </body>
</html>
3 голосов
/ 21 апреля 2010

Floating по-прежнему будет работать для любого числа div, они будут выстраиваться рядом друг с другом, пока не заполнят ширину контейнера, после чего они начнут переноситься на следующую строку.

2 голосов
/ 21 апреля 2010

Просто добавьте float: left для каждого деления.

0 голосов
/ 21 апреля 2010

Кроме того, если вы не хотите, чтобы ваши 4 элемента div переносились на следующую строку при изменении размера окна, вы можете поместить свои 4 элемента div в родительский элемент div и установить ширину этого элемента div.

Вот пример, основанный на коде BalusC выше: 

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 2684578</title>
        <style>
            .box {
                float: left;
                width: 100px;
                height: 100px;
                margin-right: -1px;
                border: 1px solid black;
            }
            .parent {
                width: 404px;
                height: 100px;
            }
        </style>
    </head>
    <body>
        <div class="parent">
            <div class="box">box1</div>
            <div class="box">box2</div>
            <div class="box">box3</div>
            <div class="box">box4</div>
        </div>
    </body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...