Question

我正在尝试在表格中创建几行，但是使用div。

每个人都有一个左边的图像，一个文本块，以及“阅读更多”.. For example, the squiggly line represents "read more"

我尝试过使用display：table，但它似乎没有工作..文本和图像没有正确对齐..

.entry{
width=100%;
display:table;
}

entry-row {
border: 2px #000000 solid;
margin-top:5px;
   margin-bottom:5px;
 display: table-row;
}

.imgrL {
border: 1px solid #c7c5c8;
padding: 5px;
float:left;
clear:left;
}

感谢大家的答案，我看到我做错了什么，现在已经修好了。）

Answer 1

你有两个问题：

CSS不使用=。更改
```
width=100%;
```
到
```
width: 100%;
```
您需要在所有类选择器上使用.。更改
```
entry-row {
```
到
```
.entry-row {
```

通过这些更改，it looks more like your image。

Answer 2

JSFiddle

以下是您想要的解决方案：

<强> HTML

<div class="entry">
    <a href="#">
        <img src="#" />
    </a>
    <div class="text">
        <h3 class="title">Article 1</h3>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Curabitur scelerisque arcu at accumsan feugiat. Fusce at interdum sapien. 
            Phasellus nec odio varius ante imperdiet facilisis. Etiam iaculis dui vitae nibh scelerisque fermentum. 
            Nam iaculis quis purus ac congue. Maecenas sed elit tortor. 
            Sed gravida velit nulla, sit amet dapibus elit mollis vitae. 
            In libero libero, mattis et ipsum eu, euismod aliquet diam. 
            Nulla eu neque interdum, suscipit libero nec, facilisis sapien. Donec consequat porttitor interdum. 
            Nullam non blandit massa.<a href="#" class="read-more">Read more</a>
        </p>
    </div>
</div>

<强> CSS

.entry > a {
    float: left;
}

.entry img {
    width: 130px;
    height: 130px;
}

.entry .text {
    float: right;
    width: 700px;
}

.entry:after {
    clear: both;
    content: '';
    display: block;
} 

.entry .title {
    color: #FF7A00;
    font-family: arial;
    font-size: 15px;
}

.entry .text {
    margin: 0px 0px 0px 20px;
}

.entry .text * {
    margin: 0px;
}

.entry .read-more {
    float: right;
}

Answer 3

display: inline-block;

可以为你完成

添加此css

div
{
    display: inline-block;

}

Answer 4

请更改css代码

entry-row {
  border: 2px #000000 solid;
  margin-top:5px;
  margin-bottom:5px;
  display: table-row;
}

要

.entry-row {
  float:left;
  border: 2px #000000 solid;
  margin-top:5px;
  margin-bottom:5px;    
}

Answer 5

您必须为每行添加overflow：hidden属性。

.entry-row {
  overflow:hidden;
  margin:0 0 20px;
}

希望它会有所帮助。

如何制作CSS行框？

5 个答案: