Question

我正在为学校作业做css / html，但我遇到了困难。我正在尝试构建一个新的视图，但我不知道如何以良好/定性的方式构建它。

问题：

这是将'Laatste nieuws'放在那个位置的好方法吗？
我想摆脱div，因为我认为它会更好使用ul / li，但我不知道如何在这种情况下使用它。
定位每篇文章的标题和说明，如第1篇图片。

<div id="newsListContainer">
                <div id="newsListHeader"><h1>Laatste nieuws</h1></div>
                <div class="newsListItem">
                    <img src="img/item3.jpg" width="100" height="75">
                    <h2> Lorem Ipsum is simply dummy text of the printing and typesetting industry. </h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
                </div>
            </div>

CSS：

#newsListContainer {
float:left;
width:100%;
background: url("img/body_bg.png") repeat-y;
}

#newsListHeader{
float:left;
width:690px;
height:40px;
margin-top:10px;
margin-bottom:10px;
border-bottom:1px solid #d6d6d6;
margin-left:133px;
}

.newsListItem {
margin-left:150px;
}

.newsListItem img{
float:left;
}

HTML UPDATED：

<div id="newsListContainer">
                <div id="newsListHeader"><h1>Laatste nieuws</h1></div>
                <ul><li class="newsListItem">
                    <img src="img/item3.jpg">
                    <h2> Lorem Ipsum is simply dummy text of  </h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </li></ul>
                <ul><li class="newsListItem">
                    <img src="img/item3.jpg">
                    <h2> Lorem Ipsum is simply dummy text of  </h2>
                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
                </li></ul>
            </div>

CSS UPDATED：

#newsListContainer {
float:left;
width:100%;
background: url("img/body_bg.png") repeat-y;
}

#newsListHeader{
float:left;
width:690px;
height:40px;
margin-top:10px;
margin-bottom:10px;
border-bottom:1px solid #d6d6d6;
margin-left:133px;
}

.newsListItem {
/*margin-left:150px;*/
padding-left: 115px;
}

.newsListItem img{
float:left;
width: 100px;
margin-left: -115px; /* SAME AS PADDING ABOVE */

Answer 1

回答你的问题，并尽量不为你做任务：

是的，标题位于项目的“列表”之外，这是好的。你需要<div id="newsListHeader">容器吗？
列表会更好，尝试一下，看看你是如何上场的（<ul><li class="newsListItem">News item here</li></ul>）。
这一开始可能很棘手，而且有很多方法（css html news list creation little help please）。如果我知道图像的宽度，我首选的技术是向.newsItemContainer添加填充，然后以相同的宽度向后边缘反差。这意味着文本将始终沿着填充线排列。

这样的事情：

.newsListItem {
  padding-left: 115px;
}

.newsListItem img{
  float:left;
  width: 100px;
  margin-left: -115px; /* SAME AS PADDING ABOVE */ 
}

Demo

Answer 2

.newsListItem img{
float:left;
margin-right:16px;
}

css新闻文章布局问题

2 个答案: