HTML CSS - Разбиение макета при масштабировании

У меня есть некоторые проблемы с моей компоновкой. Он хорошо выглядит на моем компьютере, когда я увеличиваю до 100%. Но когда я увеличиваю или уменьшаю разметку макета. Я попробовал несколько способов обернуть макет, но он пока не работает. Поскольку мне нужно, чтобы макет был отзывчивым, любая помощь приветствуется.HTML CSS - Разбиение макета при масштабировании

HTML:

<body> 
<div class="low_wrapper"> 
<div id="intro" class="category"> 
<p><span class="category_description"><h1>Intro</h1></span></p> 
<div class="low_info_header" >head</div> 
<div class="low_info_element_big"></div> 
<div class="low_info_element_big"></div> 
<div class="low_info_header" >head</div> 
</div> 

<div id="women" class="category"> 
<h1>Women</h1> 
<div class="low_info_header" >head</div> 
<div class="low_info_element_big"></div> 
<div class="low_info_element_big"></div> 
<div class="low_info_header" >head</div> 
</div> 


</div> 
</body>

CSS:

body{ 
margin: 0 0 0 0 ; 
} 

.category h1{ 
float:left; 
width:940px; 
font-family:'Open Sans'; 
} 
.low_wrapper{ 
position:absolute; 
margin-left:30px; 
margin-top:30px; 
position:absolute; 
} 

#low_info{ 
margin: 0 0 0px 33px; 
width:940px; 
background-color: #ccc; 
float:left; 
} 

.low_info_header{ 
width:940px; 
height:120px; 
background-color:#FF0A83; 
float:left; 
position:relative; 
} 


.low_info_element_big{ 
height:400px; 
width:460px; 
background-color:#FF0A83; 
margin-top:10px; 
margin-right:20px; 
margin-bottom:10px; 
float:left; 
position:relative; 

}

http://jsfiddle.net/MsUTp/1/

источник

2013-08-22 Goot

Прежде все, когда вы будете реагировать, большинство из них использует '%', я не знаю, какой отзывчивый вы делаете, надеюсь, вы не ожидаете какой-либо текучести из этого –

Вам лучше смотреть если вы хотите реагировать. – Albzi

нет, я не ожидаю текучесть. Я просто не хочу, чтобы элементы плавали во время масштабирования. – Goot

В вашем .css вы даете элементы specfic размеры с px. Если вы хотите, чтобы ваш макет изменил размер с вашего экрана, вы должны применить размер к своим элементам, используя % (т. Е. Процент от размера экрана). Таким образом, когда ваш размер экрана изменится, ваши элементы изменят размер по отношению к нему, сохраняя при этом макет.

источник

2013-08-22 10:51:19 Paddyd

Попробуйте

body { 
    margin: 0 0 0 0 ; 
    } 

.category h1 { 
    width:940px; 
    font-family:'Open Sans'; 
    } 

.low_wrapper { 
    position:absolute; 
    margin-left:30px; 
    margin-top:30px; 
    position:absolute; 
    } 

#low_info { 
    margin: 0 0 0px 33px; 
    width:940px; 
    background-color: #ccc; 
    float:left; 
    } 

.low_info_header { 
    width:100%; 
    height:120px; 
    background-color:#FF0A83; 
    position:relative; 
    } 


.low_info_element_big { 
    height:400px; 
    width:460px; 
    background-color:#FF0A83; 
    margin-top:10px; 
    margin-right:20px; 
    margin-bottom:10px; 
    position:relative; 
    }

источник

2013-08-22 11:07:36

Я хотел бы добавить в .wrapper классе и изменить .low_wrapper {положение: относительно} вместо абсолютного

.wrapper { 
width:960px; 
} 

.low_wrapper { 
position:relative; 
margin-left:30px; 
margin-top:30px; 

}

см пример: http://jsfiddle.net/MsUTp/2/

источник

2013-08-22 11:39:03 vzeke

HTML CSS - Разбиение макета при масштабировании

ответ

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