css新闻文章的布局问题

Question

我正在为学校作业做CSS / HTML，但是我被卡住了。我正在尝试构建新闻概述，但我不知道如何以良好/定性的方式构建新闻。

问题：

1. 这是将“ Laatste新手”放在该位置的好方法吗？
2. 我想摆脱div，因为我认为这样做会更好使用ul / li，但在这种情况下我不知道该如何使用。
3. 与第1篇一样，定位每篇文章的标题和描述图片。

我需要：http://i.imgur.com/vz51zyA.png

我有：http://i.imgur.com/4wTmtXu.png

<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更新：

<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更新：

#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 */ 

我正在为学校作业做CSS / HTML，但是我被卡住了。我正在尝试构建新闻概述，但我不知道如何以良好/定性的方式构建新闻概述。问题：这是放置'...

Answer 1

为回答您的问题，并尝试不为您做作业：

Answer 2

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