用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屋！