Question

我左边有一个浮动图像，右边是标题和一个小文字。我的问题是，是否有更好的写作方式。我在http://jsfiddle.net/GjKTG/1/

为此做了一个jsFiddle

这是没有css的代码

<div style="float: left;">
<div id="image">
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
</div>
<p class="title">Here goes a title</p>
<div id="text">here goes two or more lines for content
</div>
</div>

谢谢

Answer 1

怎么样：

HTML：

<div class="box">
    <h1 class="title">Here goes a title</h1>
    <div class="text">here goes two or more lines for content
    </div>
</div>

的CSS：

.title {
    margin: 0;
    color: #2D101F;
    font-family: Georgia;
    padding-bottom: 20px;
}
.text { 
    font-size: 11px; 
    line-height: 13px; 
    margin-top: -17px;
}

.box {
    background: url("http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png") no-repeat top left;
    padding-left: 40px; /* the width of the image */
    min-height: 80px; /* the height of the image */
}

http://jsfiddle.net/ZYY9q/

并且还要记住，使用id作为css选择器实际上并不是一个好主意。

Answer 2

你可能会得到一些不同的答案。你所拥有的并不可怕，但我试图将其清理一些：http://jsfiddle.net/GjKTG/18/。其中一些归结为个人偏好。

<强> HTML

<div class="imageholder">
<img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
<h3>Here goes a title</h3>
<p>here goes two or more lines for content</p>
</div>

<强> CSS

.imageholder {float:left;}
.imageholder img { float: left; width: 50px; }
.imageholder h3 {color:#2D101F;font-family: georgia;}
.imageholder p { font-size: 11px; line-height: 13px;}

的变化：

将标题改为h3以给出一些背景信息。如果有什么东西是标题，那么就这样对待它。
给了它一个课程并删除了额外的课程。处理剩下的继承
采用内联样式
摆脱了图像包装div并用CSS处理它。

如果你有多个这样的浮动，你可能会遇到一些浮动问题，但这很难说。

Answer 3

更多语义：

<article>

  <img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png" alt="">

  <h1>Here goes a title</h1>
  <p>here goes two or more lines for content</p>

</article>

如果您使用HTML5，那将是合适的，因为您没有提供更多上下文，我认为<article>将是要使用的标记，但这取决于您的html代码在上下文中表示的内容。

更新了jsFiddle：http://jsfiddle.net/nils_r/GjKTG/8/ ...但你必须调整它以满足你的需求。

Answer 4

如果你希望你的标记更加语义化，你可以放弃一些div，因为它们并不是真正需要的，并且标题使用标题标签而不是p标签。

<div style="float: left;">
   <img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png">
   <h2>Here goes a title</h2>
   <p>here goes two or more lines for content</p>
</div>

然后，您可以直接应用样式这些元素：

div img {float:left;width:50px;}

div h2 {
    color:#2D101F;
    font-family: georgia;

}

div p {
    font-size: 11px;
    line-height: 13px;
}

Answer 5

也许这样的事情？ http://jsfiddle.net/SHFEb/

<div class="side-content">
    <img src="http://b.dryicons.com/images/icon_sets/shine_icon_set/png/48x48/light_bulb.png" />
    <h2>Here goes a title</h2>
    <p>here goes two or more lines for content</p>
</div>

.side-content{float:left}
.side-content img{float:left}
.side-content h2{color:#2D101F;font-family:georgia}
.side-content p{padding-bottom:20px;font-size:11px;line-height:13px}

编写此HTML / CSS的更好方法是什么？

5 个答案: