发表新帖
发表新帖

Alternative to layout in HTML
前端 未结
关注
5 1135
忘了有多久
忘了有多久 2021-02-04 07:48

Right now I have a webpage set up to be exactly the size of the browser window with a couple overflow:scroll \'s in it.

Basically, the page is arranged in t

相关标签:
5条回答
  • 时光取名叫无心
    2021-02-04 08:07

    You should generally mark up your content semantically and then style it.

    It looks like you have five main areas:

    • messages
    • user list
    • controls
    • input
    • chatrooms

    Let's make some markup:

    <div class="left">
    <div id="messages">
        messages
    </div>
    <div id="user-list">
        user-list
    </div>
</div>
<div id="controls">
    controls
</div>
<div class="left">
    <div id="input">
        input
    </div>
    <div id="chatrooms">
        chatrooms
    </div>
</div>

    And a little bit of style:

    .left{
    clear:both;
}
    .left div{
        float: left;
    }
#controls{
    clear: both;
}

    And you should be able to complete it from here. The most important part of most CSS layouts is proper floating.

    0 讨论(0)
  • 你的背包
    2021-02-04 08:20

    New CSS grid option:

    <style>
#grid {
    display: grid;
    grid-template-columns: 20% 20% 20%;
}
</style>

<div id="grid">
    <div>first</div>
    <div>second</div>
    <div>thrid</div>
    <div>fourth</div>
    <div>fifth</div>
    <div>sixth</div>
    <div>seventh</div>
    <div>eighth</div>
    <div>nineth</div>
</div>
    0 讨论(0)
  • -上瘾入骨i
    2021-02-04 08:23

    Thanks for the link, that explains a lot. Sounds familiar, I've done this before, but it can be pretty tricky.

    Before explaining the lot, I need to know whether you want to support IE6 with this. If so, you'll probably have to revert to IE quirks mode, as you will need the border-box box model (which can't be selected in another way in IE, and it's not possible to use both top and bottom properties). If so, I recommend to put all other browsers in this box model, too, so you don't have to make two separate stylesheets for IE and the rest (yes, you'll still need some workarounds, of course). In short, after using this different box model you can have quasi top and bottom properties by styling using border-top and border-bottom, instead. They'll act like top and bottom, because they're now inside the given height (of, for instance, 100% of the viewport). I hope this is at least a bit understandable.

    If not, than it's a bit simpler and you can style using fixed positioning and <div> getting top and bottom properties. IIRC, this should also work in IE7+.

    But first, tell me whether you need support for the buggy one or not...

    0 讨论(0)
  • 再見小時候
    2021-02-04 08:31

    The problem with Eli's and Mike D.'s answers is that, if I understood this question correctly, puddingfox wants the three divs above eachother be spread over the total size of the viewport. In that case, you'll get problems coding IE6, because then you can't use both top and bottom properties on the same element (which is needed for the middle divs).

    0 讨论(0)
  • 时光取名叫无心
    2021-02-04 08:32

    Well, the basic way you do this is to break your page up into six <div>s:

    <div class="left" id="l1">1</div>
<div class="right" id="r1">2</div>
<div class="left" id="l2">3</div>
<div class="right" id="r2">4</div>
<div class="left" id="l3">5</div>
<div class="right" id="r3">6</div>

    Then you write some CSS:

    div.left {
    float: left;
    clear: both;
}

    And you should get something like:

    1   2

3   4

5   6

    No nested <div> needed.

    0 讨论(0)
 看不清?
提交回复
热议问题