Правый край не работает

Я пытаюсь найти лучший метод для создания раздела в середине веб-страницы, подобной листу бумаги. Например, у меня серый фон, а затем я хочу поместить некоторый контент на белый.Правый край не работает

Мой CSS выглядит следующим образом:

body 
{ 
    background:grey; 
} 

.page 
{ 
    display: table; 
    background:white; 
    width:100%; 
    margin: 0px 50px; 
}

Мой файл PHP выглядит следующим образом:

<html> 
    <head> 
     <link rel="stylesheet" type="text/css" href="styles.css"/> 
    </head> 
    <body> 
     <div class="page"> 
     hello this is the content 
     </div> 
    </body> 
</html>

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

источник

2014-10-24 Matthew

Избавиться от дисплея и ширины правил, установите маржу 'поле: 0 auto', а затем установить ширину на DIV что-то менее чем на 100%. – j08691

Это отлично работает! Спасибо! – Matthew

Как насчет использования div с именем класса page в качестве обертки?

затем добавить элемент div с именем класса атрибута, как content, как эта

body 
 
{ 
 
    background:grey; 
 
} 
 

 
.page 
 
{ 
 
    display: table; 
 
    background:white; 
 
    width:100%; 
 
} 
 
.content{ 
 
    background:red; 
 
    margin: 0px 50px; 
 
}

<br><br> 
 
<div class="page"> 
 
      <div class="content">hello this is the content</div> 
 
</div>

источник

2014-10-24 15:50:49

Спасибо. Это работает. – Matthew

Ваша ширина на div составляет 100%. Поля слева - 50 пикселей. Таким образом, вы видите, что div выталкивается на 50 пикселей с левого края тела. Вы не видите правильный край, потому что ваша ширина равна ширине тела, поэтому технически правый край - это PAST в окне просмотра.

Простое исправление - удалите объявление ширины и измените отображение на блокировку.

.page { 
    display: block; 
    background:white; 
    margin: 0px 50px; 
}

DIV является блочным элементом по умолчанию, так что, естественно, заполнить его контейнер (тело, в данном случае). Нет необходимости указывать ширину 100%. И действительно нет необходимости объявлять его показ, но я сделал это, чтобы подчеркнуть переход от таблицы к блоку.

источник

2014-10-24 15:44:18

Спасибо, Джош. Я попробовал это, и белый раздел больше не центрирован на экране. – Matthew

Я не уверен, почему вы объявили .page в display:table как содержание в нем (в ваш пример) не обернут ничем с display:table-cell. Однако, предположив, что вы do хотите, чтобы он оставался display:table, тогда вам нужно удалить margin и использовать padding на его родительском элементе (в данном случае body).

body { 
 
    background:grey; 
 
    padding:0 50px; /* <-- added padding */ 
 
} 
 
.page { 
 
    display: table; 
 
    background:white; 
 
    width:100%; 
 
    /* removed margin */ 
 
}

<html> 
 
    <head> 
 
     <link rel="stylesheet" type="text/css" href="styles.css"/> 
 
    </head> 
 
    <body> 
 
     <div class="page"> 
 
     hello this is the content 
 
     </div> 
 
    </body> 
 
</html>

источник

2014-10-24 16:38:36 Moob

Правый край не работает

ответ

Смежные вопросы