发表新帖
发表新帖

Problem aligning divs next to each other?

后端 未结
关注
3 1160
心在旅途
心在旅途 2021-01-22 01:40

I want this design: 

DIV1: auto-size DIV2: 160px
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divt
相关标签:
3条回答
  • -上瘾入骨i
    2021-01-22 02:18

    Try the following. ids are used for unique content and should be used once only per page. Also tables are still worth considering in some circumstances. Using borders on your divs while you are working on the layout will also help (red and green borders below).

    <html>
<head>
<style type="text/css">

.textcontent {
    float: left;
    border: 1px solid red;
    width: 700px;
    margin-bottom: 4px;
    }

.ads {
    float: left;
    width: 120px;
    border: 1px solid green;
    }

.textcontent:before {
    clear: left;
    }

</style>

</head>
<body>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>

<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>

<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>

<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>

<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>

<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>

</body>
</html>
    0 讨论(0)
  • 清酒与你
    2021-01-22 02:18

    I believe I can help!

    What you have to do is very simple.. Let's say you want div1 and div2 to take up 100% of the screen. Just make a div with the id container. Set the padding to: 0 160px 0 0, And also set box-sizing and -webkit-box-sizing to: border-box.. All this does is Pushing the content away from the right side of the screen. The border-box setting will keep the width 100% instead of the default 100% + 160px.

    Now you can place div1 in the container.. If everything is done correct you see a white space of 160px on the right side.

    What you will do next.. You have to put div2 before div1 in your HTML.. After that set some css properties.. Div2 should float to the right and have the following margin: 0 -160px 0 0.

    The divs are on the right places cause div1 isn't bothered by div2 because it's in an area which is forbidden for div 1 thanks to the padding of the container. Div2 however is not restricted to this area because of the negative margin.

    There's one last thing you wan to do.. Lets say the containerDiv has nice borders and a simple backgroundcolor. When the div1 is longer han div2 thr container will not stretch for div2 because it is floated.. Thats why you shoukd put this in the very end of div1: .

    This line creates a singe new line on the webpage at the point where there's no floating element beside it. In other words, it will save you!

    0 讨论(0)
  • 暖寄归人
    2021-01-22 02:36

    Not really sure what you're after, but you can try what I've done here. You should only use an id on a unique element in a document, so if you want more than one, re-assign them as classes. display: table-cell; is not needed here.

    HTML:

    <div class="mainbulk">
    <div class="ads">
    ads would, hypothetically, be placed here if this were actually an actual website.
    </div>
    <div class="textcontent"> 

        <p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
    </div>

</div>

    CSS:

    .mainbulk {
    padding: 1.5em 2% 1.5em .5em;
    border: 1px solid #000;
}
.ads {
    width: 7.5em;
    float:right;
    text-align: right;
    border: 1px dotted #f00;
}
.textcontent {
    max-width: 40em;
    float: right;
    border: 1px dotted #00f;
}
    0 讨论(0)
 看不清?
提交回复
热议问题