不同的div大小调整

我有2周的div是并排的一面，弥补我的响应式设计的一部分不同的div大小调整

我有每个div都定在179的高度，因为没有的div的一个底下的缺口并建议给他们一个高度。

当没有足够的空间的divs堆栈，但然后页面内容被推下比id更进一步。

当有空间时，有没有什么办法可以让div保持相同的大小，但是当浏览器被调整大小并且没有足够的空间时，有一个结果只有某个高度时说20px而不是179px对于divs和他们堆栈？

IM希望那里有比使用其它媒体的答案查询

</div> 
<div class="right-column1"> 

</div> 
</div> 


.container1 { 
width: 100%; 

} 
.left-column1 { 
width: 50%; 
float:left; 
height:179px; 
} 
.right-column1 { 
width:50%; 
float:left; 
height:179px; 
}`

来源

2014-04-26 Techagesite

你的问题有点混乱，你能给我们一个你的问题的链接？你可以使用jsfiddle或其他免费主机，谢谢！ –

我基本上只是想要正确的div从179到20px高度，当浏览器变得很小，以容纳左侧和右侧的div，他们堆叠 – Techagesite

由于右侧div只包含一个搜索框，并且当它们占用大量屏幕空间时堆叠在较小的屏幕或浏览器大小上，但在全尺寸的浏览器和屏幕上它们都是179像素，因为如果它们是2个不同的高度，它看起来很奇怪。 – Techagesite

我不知道这是可能的单独CSS。

我在FIDDLE中做过 - 我不确定它是否适合您。

var $startwindowwidth = $(window).width(); 

$(window).resize(function() { 
    if ($(window).width() < ($startwindowwidth * 0.5)) 
    { 
     $('.right-column1').css({ 
      'float' : 'none', 
      'height' : '20px' 
           }); 
     $('.left-column1').css({ 
      'float' : 'none' 
           }); 
    } else { 
     $('.right-column1').css({ 
      'float' : 'left', 
      'height' : '179px' 
           }); 
     $('.left-column1').css({ 
      'float' : 'left' 
           }); 
    } 
});

试试这个http://jsfiddle.net/YAFdz/2/。

不要把它放在一个高度，你可以通过放入一个div来居中。

但请记住，当您开始将“固定”宽度信息放入div时，它不会是“流动”。

来源

2014-04-26 23:30:13 TimSPQR

我可以设置背景颜色相同的容器，只有正确的div到搜索框的大小，如果我有搜索框垂直居中？香港专业教育学院试图但左，右divs堆叠搜索框消失 – Techagesite

我不知道我明白 - 你是否改变窗口更改大小之前的初始布局？ – TimSPQR

以及正确的div将始终设置为搜索框的大小。说20px高，并将在容器中垂直居中。因为容器的背景颜色，它会看起来像是与左侧div相同的大小。所以当浏览器上的左右堆叠缩小时，正确的div只会占用20px而不是179，并且页面内容不会隐藏在2 197px div之下。 – Techagesite

当屏幕尺寸变小时，您可以使用媒体查询来更改右列的样式。例如，如果你想要的两个div是相同的大小，直到视小于200像素（此时右列将得到40像素的高度），你可以使用以下命令：

#left , #right{ 
 
    width: 50%; 
 
    height: 200px; 
 
    text-align: center; 
 
} 
 

 

 
#left{ 
 
    float: left; 
 
    background-color: blue; 
 
} 
 

 

 
#right{ 
 
    float: right; 
 
    background-color: orange; 
 
} 
 

 
@media (max-width: 200px){ 
 
#left{ 
 
    width: 100%; 
 
} 
 

 

 
#right{ 
 
    width: 100%; 
 
    height: 40px; 
 
} 
 
    
 
}

<html> 
 
    <body> 
 
     <div id="left"><p>Left</p></div> 
 
     <div id="right"><p>Right</p></div> 
 
    </body> 
 
</html>

来源

2016-10-08 21:17:04

不同的div大小调整

回答

相关问题