Как центрировать два блока с некоторым промежутком между ними, используя CSS? - PullRequest
Новая
       3

Как центрировать два блока с некоторым промежутком между ними, используя CSS?

2 голосов
/ 25 февраля 2012

То, чего я хотел бы достичь, это следующий дизайн:

enter image description here

Два текстовых блока с некоторыми промежутками между ними, выровненными по средней линии страницы (см. Рисунок).

Я пытался поэкспериментировать со свойством float, используя margin и padding, чтобы получить разрыв, но я не могу расположить их по центру.

РЕДАКТИРОВАТЬ: Я забыл указать, что стрелки показывают изменяемые размеры частей: так, ширина страницы должна быть изменяемой, тогда как сам текст - нет, но текст является динамическим содержимым и может меняться от страницы к странице, поэтому нет никакого способапросто определить постоянную ширину для него в пикселях.

Ответы [ 4 ]

5 голосов
/ 25 февраля 2012

Вы могли бы сделать это так 

<div id="wrapper">       <!-- wrapper will be in the middle of the page -->
   <div id="box1"></div> <!-- Your First Box -->
   <div id="box2"></div> <!-- Second Box -->
</div>

#wrapper { width: 1000px; margin: 0 auto }
#box1 { width: 400px; float: left; }
#box2 { width: 400px; float: right; }
/* There Will be 200px gap in between of two boxes */
1 голос
/ 25 февраля 2012

Используйте display: table с margin: 0 auto для центрированного блока и display: table-cell с процентом padding для его дочерних элементов. При необходимости установите процент width для центрированного блока.

0 голосов
/ 07 июля 2015

Для левого блока установите для левого поля значение auto.Для правого блока установите правое.Примерно так: 

#leftBlock {
    margin-left: auto;
}

#rightBlock {
    margin-right: auto;
}

Это помещает их обратно в центр экрана.Чтобы добавить пространство между блоками, установите другое поле на определенную величину: 

#leftBlock {
    margin-left: auto;
    margin-right: 5%;
}

#rightBlock {
    margin-right: auto;
    margin-left: 5%;
}
0 голосов
/ 25 февраля 2012

Что-то вроде это ?

HTML: 

<!doctype html>
<html>
<body>
<div class="wrapper">
<div class="column">
<div class="column1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi in libero interdum ante vulputate viverra non vehicula sapien. Sed ac posuere sapien. Morbi a massa leo, sed hendrerit odio. Aliquam in diam in mauris elementum fringilla. Maecenas vestibulum massa at massa imperdiet eu venenatis velit sagittis. Donec nec libero vel ipsum mattis cursus. Ut vel tortor id lectus rhoncus laoreet. Aliquam volutpat rhoncus arcu et euismod. Phasellus pulvinar condimentum lacus non dictum. In nisi lorem, ultrices quis convallis vel, consectetur vulputate arcu. Quisque malesuada bibendum nulla, at facilisis quam facilisis sed. Pellentesque pellentesque, mi ut dictum suscipit, arcu nisl consequat urna, vitae auctor arcu quam a felis. Proin consectetur fermentum leo sit amet faucibus.
</div>
</div>
<div class="column">
<div class="column2">
Maecenas quis interdum est. Phasellus ut erat nec ligula blandit cursus. Nulla laoreet viverra interdum. Etiam sagittis porttitor elit id egestas. Morbi at nunc turpis, ut interdum magna. Nam eget dui metus. In aliquet dui non nisl porttitor et pretium nisi tristique. Vivamus non eros ut ligula pharetra porta. Suspendisse suscipit dignissim nibh, vitae auctor ligula condimentum et. In sit amet ultrices sapien. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</div>
</div>
</body>
</html>

CSS: 

body {padding:30px;}
.wrapper {margin:30px auto;}
.column {width:50%;float:left;}
.column1 {padding-right:20px;}
.column2 {padding-left:20px;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...