Separating two divs with CSS_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-04-06 17:06 出处：网络

Say I have two divs A and B, which are currently aligned side by side. How can I get A to be separated from B by 50px, while still letting 开发者_如何转开发A to take up 70% of the remaining space and

相关专题：css

EDIT: Accepted the answer a little early before I actually tried. Whoops.

JSFiddles:

A Tale of Two Divs

Now separated, but now with the second one on a second line?

Try this out if it solves your problem.

<html>
<head>
    <style type="text/css">
        #Content
        {
            border: 3px solid blue;
            position: relative;
            height: 300px;
        }

        #divA
        {
            border: 3px solid red;
            position: absolute;
            margin-right: 25px;
            left: 5px;
            top: 5px;
            bottom: 5px;
            right: 70%;
        }

        #divB
        {
            border: 3px solid green;
            position: absolute;
            right: 5px;
            top: 5px;
            bottom: 5px;
            left: 30%;
            margin-left: 25px;
        }
    </style>
</head>
<body>
    <div id="Content">
        <div id="divA">
        </div>
        <div id="divB">
        </div>
    </div>
</body>
</html>

just set the margin-left or padding-left of div B

I believe your selected answer will not work:

http://jsfiddle.net/cNsXh/

edit:
Sorry, the above example was not correct at first. Now it is.
/edit

As you can see, div #b will move under div #a because margin-left (or padding-left) will be added to the 30%. And because we're mixing percentage with pixel values here, we will not be able to define values that will guarantee to always add up to exactly 100%.

You'll need to use a wrapper for div #b which will have 30% width, and not define a width for div #b, but define margin-left. Because a div is a block element it will automatically fill the remaining space inside the wrapper div:

http://jsfiddle.net/k7LRz/

This way you will circumvent the CSS < 3 box-model features which oddly enough was defined such that defining a dimension (width / height) will NOT subtract margins and/or paddings and/or border-width.
I believe CSS 3's box-model will provide more flexible options here. But, admittedly, I'm not sure yet about cross-browser support for these new features.

@wrongusername; i know you accept that answer but you can check this solution as well in this you have no need to give extra mark-up & if you give padding to your div it's not affect the structure.

CHECK THIS EXAMPLE: http://jsfiddle.net/sandeep/k7LRz/3/

http://jsfiddle.net/efortis/HJDWM/

#divA{ 
    width: 69%;  
}
#divB{ 
    width: 29%; 
    margin-left: 2%;
}

Separating two divs with CSS

精彩评论

关注公众号

热门标签

图文推荐

Separating two divs with CSS

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：