CSS процент Минимальная ширина/Margin выпуск

<html> 
<head> 
<style type="text/css"> 
body{ 
    background-color:#000; 
    background-image:url(../i/bck.gif); 
    font-family:"Helvetica Neue",Arial,sans-serif; 
    font-size:12px; 
    color:#fff; 
    height:100%; 
    margin:0; 
} 
#wrap{ 
    min-width:1000px; 
    width:68%; 
    margin:0 16%; 
    height:100%; 
    background-color:red; 
} 
</style> 
</head> 
<body> 
<div id="wrap">a</div> 
</body> 
</html>

EDIT:CSS процент Минимальная ширина/Margin выпуск

Я перепутались с кодом для немного сейчас, и обнаружили, что эта проблема стоит при минимальной ширине. Если вы измените размер (уменьшите) браузер, вы увидите, что он сохранит маржу в размере 16% слева, а ширина не будет на 68% больше, а 1000 пикселей, которая может составлять более 68%, когда окно браузера меньше. Теперь вопрос в том, кто-нибудь знает об обходном пути для этого?

Пример 1: Ширина браузера: 2000px, ширина div: 68% -> 1360px, маржа слева + право: 16% -> 320 пикселей каждый.

Пример 2: Ширина браузера: 1200px, ширина div: 1000px (мин), маржа слева + право: 16% -> 192p каждый.

Пример 2 - проблема. Поскольку 68% браузера меньше 1000 пикселей, div получает ширину 1000 пикселей. 1000px + 192px + 192px не равно полному размеру браузера, который равен 1200px.

источник

2012-01-20 Daku Daku

Как выглядит ваш html? – Arjan

Я отправил оригинальный вопрос на свой iphone и понял, что не был доволен. Я редактировал оригинальный вопрос. Посмотрите, есть ли у вас решение сейчас. –

Я только что протестировал концепцию и, похоже, работает так, как ожидалось.

<div>foo</div>

и CSS:

div { width: 80%; margin: 0 10%; }

Ваш селектор является идентификатор, если div не имеет id="div", селектор должен измениться. И капитализация атрибутов имеет значение.

источник

2012-01-21 02:54:17

Попробуйте добавить:

#wrap { 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    width: 100%; 
    min-width: 1000px; 
    margin: 0 16%; 
}

источник

2012-01-21 05:19:08

Я не уверен, что это должно делать, но в моем случае это ничего не делает. –

Проблема с этой линией:

margin: 0 16%;

Вместо указания маржи левых и маржинальной-вправо, вы можете также сказать браузер, чтобы вычислить их:

margin: 0 auto;

Таким образом, если ваш #wrap имеет ширину 68%, ваши поля будут 16% (или 17%, но округление не является вашей проблемой здесь). Если ваш #wrap имеет ширину 1000 пикселей, левое и правое поля будут по-прежнему равны. Но они будут менее 16%.

Чтобы быть полным, ваш html должен начинаться с действительной декларации doctype.

источник

2012-01-21 09:57:55 Arjan

О, это сводит меня с ума. margin: 0 auto; не будет работать с положением: абсолютным. Я занял позицию абсолютным, добавив еще одну обертку и сделав все относительно потом. Кроме того, это не фактический html/css, а только что-то, что я собрал, чтобы проверить, почему моя страница не работает. это был css, другой элемент на странице или что. Благодарю. –

CSS процент Минимальная ширина/Margin выпуск

ответ

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