开发者

create a 4x3 grid of css panels

开发者 https://www.devze.com 2022-12-30 11:30 出处:网络
I am trying to find a 开发者_开发百科CSS tutorial that would enable me to create a 4x3 grid of features like on this site http://www.ewedding.com/features.php

I am trying to find a 开发者_开发百科CSS tutorial that would enable me to create a 4x3 grid of features like on this site http://www.ewedding.com/features.php

If anybody can suggest one it would be great! All the tutorials that I have found seem to style the entire page rather that a particular part of the page.

Thanks in advance

Decbrad


the page you link uses an UL as outer element and an LI as inner element so you have this:

<ul>
    <li>Feature1.1</li>
    <li>Feature1.2</li>
    <li>Feature1.3</li>
</ul>
<ul>
    <li>Feature2.1</li>
    <li>Feature2.2</li>
    <li>Feature2.3</li>
</ul>
<ul>
    <li>Feature3.1</li>
    <li>Feature3.2</li>
    <li>Feature3.3</li>
</ul>

use a CSS definition like this:

ul{
    float:left;
    width: //specify the width
    display:block;
}

li{
    list-style: none;
    display:block;
}

etc.

That said, I think a CSS table layout is better for this:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

0

精彩评论

暂无评论...
验证码 换一张
取 消