发表新帖
发表新帖

Is there a simple 3-column, pure CSS layout?

前端 未结
关注
7 831
粉色の甜心
粉色の甜心 2020-12-29 16:27

One that doesn\'t require the following:

  1. Reliance on images (i.e. \"faux columns\")
  2. Some kind of weirdness or \"hack\" put in specifically for IE
相关标签:
7条回答
  • 青春惊慌失措
    2020-12-29 16:44

    You might be able adapt:

    http://matthewjamestaylor.com/blog/perfect-3-column.htm

    0 讨论(0)
  • 囚心锁ツ
    2020-12-29 16:46

    There is no such thing as "simple" when you talk about CSS.

    But there is a simple solution that is cross browser, degrades gracefully and is fully HTML and CSS compliant: use a table with three columns.

    Reasoning: DIVs are not meant to have the same dynamic height. Therefore, CSS has no support for this. If you need a block element which makes sure that its children have the same height, then that's what tables are for.

    [EDIT] Sorry to offend all you CSS fanatics out there but, frankly, when something is not designed to do something and you abuse it, and it doesn't work, please stop complaining, ok? A DIV is not a TABLE and can't be used as one without relying on hacks.

    [EDIT2] As was said already in various places, the reason not to use tables for layout was that, in early times, tables were the only design element and that lead to HTML which had dozens of nested tables. That's bad. But that doesn't mean you must not use a single table to put everything in place and then rely on CSS to make the stuff inside look right.

    A brain is like a parachute: It's nice to have but only useful when it's open.

    0 讨论(0)
  • 情书的邮戳
    2020-12-29 16:49

    I agree with Robert. Due to browsers interpreting CSS rules and rendering the final page differently I doubt you'll find a perfect solution without being more flexible in your requirements.

    0 讨论(0)
  • 心在旅途
    2020-12-29 16:50

    You can achive this by using jS.

    If you were to create 3 Divs one float left one flot right and the middle as margin left & right with a width to centre it.

    Then with a bit of JS each div having their own ID you could calcultate their height set the 2 lowers ones to the highest value.

    Pretty simple with Jquery.

    0 讨论(0)
  • 忘掉有多难
    2020-12-29 16:54

    divide page into three columns, same height?

    <html>
<head>
<style type="text/css">
#col_wrapper{
    height: 400px;
}

.col{
    width: 33%;
    float:left;
    height: 100%;
}
</style>
</head>
<body>
<div id="col_wrapper">
    <div class="col">
        one
    </div>
    <div class="col">
        two
    </div>
    <div class="col">
        three
    </div>
</div>
</body>

    no quirks and pretty plain.

    0 讨论(0)
  • 天涯浪人
    2020-12-29 16:56

    YAML

    "Yet Another Multicolumn Layout" (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.

    It contains some IE bug fixes, but you can remove them.

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