css新闻文章排版问题

Question

I am doing css/html for a school assignment, but I got stuck.我正在为学校作业做 css/html，但我被卡住了。 I am trying to build a newsoverview but I don't know how to build this in the good/qualitative way.我正在尝试构建新闻概览，但我不知道如何以良好/定性的方式构建它。

Problems:问题：

Is this a good way to put 'Laatste nieuws' in that position?这是将“Laatste nieuws”置于该位置的好方法吗？
I want to get rid of the div's because I think it will be better to use ul/li, but I don't know how I can use it in this case.我想摆脱 div，因为我认为使用 ul/li 会更好，但我不知道在这种情况下如何使用它。
Positioning title and description of each article like the 1st picture.定位每篇文章的标题和描述，如第一张图。

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

I have: http://i.imgur.com/4wTmtXu.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: 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: 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 UPDATED: 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 */

Answer 1

In answer to your questions, and trying not to do your assignment for you:回答您的问题，并尽量不为您完成任务：

Yes, the header is outside the 'list' of items which is good.是的，标题在项目的“列表”之外，这很好。 Do you need the <div id="newsListHeader"> container though?你需要<div id="newsListHeader">容器吗？
A list would be better, try it and see how you get on ( <ul><li class="newsListItem">News item here</li></ul> ).一个列表会更好，尝试一下，看看你的进展如何（ <ul><li class="newsListItem">News item here</li></ul> ）。
This can be tricky at first and there's many ways of doing it ( css html news list creation little help please ).起初这可能很棘手，并且有很多方法可以做到（请创建 css html 新闻列表帮助不大）。 My preferred technique if I know the width of the image, is to add a padding to the .newsItemContainer and then negatively margin back the image by the same width.如果我知道图像的宽度，我的首选技术是向.newsItemContainer添加填充，然后将图像负边距相同的宽度。 That means that the text will always line up along that padding line.这意味着文本将始终沿着该填充线排列。

Code snippet:代码片段：

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

 <!DOCTYPE html> <html> <head> <meta charset=utf-8 /> <title>JS Bin</title> </head> <body> <div class="newsListItem"> <img src="http://placehold.it/100x75" 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 class="newsListItem"> <img src="http://placehold.it/100x75" 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> </body> </html>

Answer 2

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

css新闻文章排版问题

问题描述

2 个解决方案

解决方案1
0 已采纳 2013-12-16 23:47:54

解决方案2
-1 2013-12-16 23:20:47

css新闻文章排版问题

问题描述

2 个解决方案

解决方案1 0 已采纳 2013-12-16 23:47:54

解决方案2 -1 2013-12-16 23:20:47

解决方案1
0 已采纳 2013-12-16 23:47:54

解决方案2
-1 2013-12-16 23:20:47