用html中的div设计 [英] design with div in html
问题描述
<div style="top:10%;left:0%;background-color:red;width:20%;bottom:0%;position:absolute"></div>
<div style="top:10%;left:20%;background-color:blue;width:80%;bottom:0%;position:absolute"></div>
该代码可以实现我想要的效果.
但是我想把整个东西放在div(比如``midDiv'')中.然后如何编写代码呢?实际上我想要的是,当我改变"midDiv"的位置时,内部设计将与尊重位置.
实际上,当我们设置position ="absolute"时,我认为该位置是相对于
设置的
整个页面.但是我想相对于div"midDiv"设置两个div的左,右,下等位置(如上所述),因为我想将两个div放在"midDiv"中.
如果即使现在仍然无法理解我的问题,请告诉我.
this code works which I want.
but I want the whole thing inside a div(say,''midDiv'').Then How to write the code?Actually I want,when I change the position of the ''midDiv'',the inside design will be same with respect to the position.
Actually,when we set position=''absolute'',I think the position is set with respect to
the whole page.But I want to set left,right,bottom,etc position of the two divs(explained above) with respect to the div ''midDiv'' as I want to put the two divs inside ''midDiv''.
If my problem is not understood even now please make me know.
推荐答案
如果我正确理解了您的问题,那么下面的代码将为您服务.
风格:
If I understood your problem correctly, then below code will work for you.
Style:
<style type="text/css" media="screen">
#midDiv
{
position: relative;
border: 1px solid #ccc;
width: 500px;
height: 250px;
top: 100px;
left: 200px;
}
#div1
{
top:10%;
left:0%;
background-color:
red;
width:20%;
bottom:0%;
position: relative;
}
#div2
{
top:10%;
left:20%;
background-color:
blue;
width:80%;
bottom:0%;
position: absolute;
}
HTML:
HTML:
<div id="midDiv">
<div id="div1">Div1</div>
<div id="div2">Div2</div>
</div>
我也建议不要使用内联样式,因为这是不好的编码习惯.
祝您编码愉快!
Also I suggest not to use inline style as it is bad coding practice.
Happy Coding!
这篇关于用html中的div设计的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!