Question

我正在尝试创建一个看起来像这样的页面：

http://www.drmichaelbogdan.com/plastic-surgery/

（我指的是“了解我们特色程序的更多信息：”表格，颜色不同）。

我更喜欢不使用表格，因为根据我的理解，使用“纯粹”的CSS会更明智。

唉，我的CSS技能有点缺乏。

有没有人可以帮我在CSS中创建这个外观？

我的HTML“结构”看起来像这样：

<div id="latestArticlesWrapper">
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
       <div class = "newArticle"> 
            <div class = "newArticleImage">
            </div>
            <div class="newArticleData">
            </div>
       </div>
</div>

如果需要，如果您认为它会有所帮助，我可以将标签从“div”更改为您说的任何内容，只要它“有助于原因”:-)（可能是针对奇数/偶数要求） - div是在循环中创建的......）

显然，它应该在所有主流浏览器上都很好看（Firefox，Chrome和IE）。

好吧，像往常一样 - IE给我带来了麻烦。它在Firefox it really does上看起来很棒，但在IE上显示 - it gets messed up

我确实更改了html和CSS，这是我现在正在使用的内容：

HTML：

<div id="latestArticlesWrapper">
       <div class = "<%= (oddEven = !oddEven) ? "newArticle white" : "newArticle yellow"%>"> 
             <div class = "newArticleImage">
             </div>
             <div class="newArticleData">
                <span class="newArticleTitle"></span>
                <span class="newArticleDate"></span>
                <span class="newArticleContent"></span>
                <span class="newArticleLink"></span>

             </div>
       </div>
</div>

CSS：

#latestArticlesWrapper {
    width:100%;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:justify;
}

.newArticle {
    height:146px;
}

.yellow {
    background:#F2E4C2; 
}
.white 
{
    background:#fff;
}

.newArticleImage {
    width:96px;
    height:96px;
    margin-right:20px;
    margin-top:10px;
    float:right;
}

.newArticleData {
    margin-right:20px;
    margin-top:10px;
    float:right;
    width:404px;
}

.newArticleData h3 {
    padding:0;
    margin:0;
    margin-bottom:3px;
}

.newArticleTitle 
{
    float: right;
}

.newArticleDate
{
    float: left;
    padding-left: 5px;
    padding-right:20px;
    background:url(../images/icons/date.png) right no-repeat;
}

.newArticleContent
{
    float: right;
}

.newArticleLink
{
    float: left;
}

所以....我如何让IE开心？ :-P

Answer 1

到目前为止，你的html部分是正确的。你只需要添加一些浮动元素：

div.latestArticlesWrapper
{
    width: #px; /* static width */
}

div.newArticle, div.newArticleAlt
{
    float: left;
    width: #px;  /* should be the width of the entire area to force the float to wrap */
}

div.newArticle
{
    background-color: #ffffff;
}

div.newArticleAlt
{
    background-color: #eeeeee;
    /* alternate row color, use conditional to separate */
}

div.newArticleImage
{
    float: left;
    width: #px;
    padding: #px; /* width + padding = total width */
}

div.newArticleData
{
    float: left;
    width: #px;
    /* don't put padding here for text. use the <p> tag or another <div> */
}

因为你要求一个像引用的网站（这是一个静态宽度），我把风格放在这里静态宽度。如果您有一个动态宽度网站，则必须以不同的方式处理宽度。

Answer 2

我的尝试：http://jsbin.com/umeno3

<强> HTML

<div id="latestArticlesWrapper">
       <div class = "newArticle yellow"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
      <div class = "newArticle white"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
       <div class = "newArticle yellow"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
       <div class = "newArticle white"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
       <div class = "newArticle yellow"> 
            <div class = "newArticleImage"><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />
            </div>
            <div class="newArticleData"><h3>Rhinoplasty (Nose Job)</h3>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.
            </div>
       </div>
</div>

<强> CSS

#latestArticlesWrapper {
    width:560px;
    font-size:12px;
    font-family:Arial, Helvetica, sans-serif;
    text-align:justify;
}

.newArticle {
    height:116px;
}

.yellow {
    background:#F2E4C2; 
}
.white {
    background:#fff;
     }
.newArticleImage {
    width:96px;
    height:96px;
    margin-left:20px;
    margin-top:10px;
    float:left;
}

.newArticleData {
    margin-left:20px;
    margin-top:10px;
    float:left;
    width:404px;
}

h3 {
    padding:0;
    margin:0;
    margin-bottom:3px;
}

更改行的bakcground颜色，只需更改newArticle类附近的类

PS：对于表格数据作为你的例子，我建议你使用表格，它更具语义性，然后你可以通过CSS设置它。但是如果你仍然想用div做，那么你可以按照上面的解决方案。

Answer 3

我可以建议使用稍微不同的html结构吗？鉴于内容本身，我建议如下：

<div id="latestArticlesWrapper">
    <dl>
        <dt>Rhinoplasty (nose job)</dt>
        <dd><img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" />Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.</dd>
        <dt>Breast enlargement</dt>
        <dd><img src="http://www.drmichaelbogdan.com/images/featured-breast-augmentation.jpg" />With more choices than ever before, breast augmentation is an excellent option for women who are unsatisfied with the size of their breasts, and would like to create a more voluptuous silhouette.</dd>
        <dt>Mommy makeover</dt>
        <dd><img src="http://www.drmichaelbogdan.com/images/featured-mommy-makeover.jpg" />After having children, many mothers desire a Mommy Makeover to regain their pre-baby body. A Mommy Makeover can return a youthful appearance to your breasts and tummy.</dd>
    </dl>
</div>

使用css：

dt, dd {
    position: relative;
    padding: 0 0 0 110px;
}
dd img {
    position: absolute;
    top: -1em;
    left: 0.2em;
}
dt {
    font-weight: bold;
}
dd {
    margin: 0 0 1em 0;
}

JS Fiddle demo

我会注意到你发布的html没有任何内在的错误的，只是上面的优点是更简单，需要担心的元素更少，并利用了语义dl (definition list) element和an easier intro from W3schools。

Answer 4

将其保存到文件并在浏览器中打开...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Latest Articles Example</title>
    <style>
        #latestArticlesWrapper { font-family:arial,sans-serif; width:560px; }
        #latestArticlesWrapper .odd { background-color:#F2E4C2; }
        #latestArticlesWrapper .even { background-color:#FFFFFF; }
        .newArticleImage { text-align:center; margin:10px 0 10px 0; float:left; display:inline; width:140px; }
        .newArticleData { float:left; display:inline; width:410px; padding:0 10px 0 0;}
        .newArticleData h4 { font-size:14px; margin:10px 0 0 0;}
        .newArticleData p { font-size:0.8125em;  margin:5px 0 0 0; line-height:1.5em; }
    </style>

    <!-- The following styles are from http://www.positioniseverything.net/easyclearing.html -->
    <style type="text/css">
        .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
        .clearfix {display: inline-block;}  /* for IE/Mac */
    </style>
    <!--[if IE]>
    <style type="text/css">
        .clearfix { zoom: 1; display: block; }
    </style>
    <![endif]-->
</head>
<body>

<div id="latestArticlesWrapper">
    <div class="newArticle odd clearfix"> 
        <div class="newArticleImage">
            <img src="http://www.drmichaelbogdan.com/images/featured-rhinoplasty.jpg" alt="">
        </div>
        <div class="newArticleData">
            <h4>Rhinoplasty (Nose Job)</h4>
            <p>Subtle changes in the shape or size of the nose can have a tremendous impact on overall facial appearance. Rhinoplasty, also known as cosmetic nose surgery, can help people feel more confident about their appearance.</p>
        </div>
    </div>
    <div class="newArticle even clearfix"> 
        <div class="newArticleImage">
            <img src="http://www.drmichaelbogdan.com/images/featured-breast-augmentation.jpg" alt="">
        </div>
        <div class="newArticleData">
            <h4>Breast Enlargement</h4>
            <p>With more choices than ever before, breast augmentation is an excellent option for women who are unsatisfied with the size of their breasts, and would like to create a more voluptuous silhouette.</p>
        </div>
    </div>
    <div class="newArticle odd clearfix"> 
        <div class="newArticleImage">
            <img src="http://www.drmichaelbogdan.com/images/featured-mommy-makeover.jpg" alt="">
        </div>
        <div class="newArticleData">
            <h4>Mommy Makeover</h4>
            <p>After having children, many mothers desire a Mommy Makeover to regain their pre-baby body. A Mommy Makeover can return a youthful appearance to your breasts and tummy.</p>
        </div>
    </div>
</div>

</body>
</html>

看起来我来不及了！

需要来自CSS wiz的帮助 - 在不使用表的情况下创建表“look”

4 个答案: