Question

我对CSS不是很了解。我知道很多属性，但是当涉及浮动div和更高级的方面时，我有点绿。

我想重现这个布局，而不是使用HTML表格，我知道这不是语义上的好。

<table class="selection">
<tr>
    <td rowspan="3" class="type">dui</td>
    <td rowspan="3"><img src="holder.js/35x35" /></td>
    <td class="name">Phasellus convallis pellentesque erat</td>
    <td><strong>Quisque:</strong> eu dui vitae</td>
</tr>
<tr>
    <td><strong>Feugiat:</strong> interdum vitae</td>
    <td><strong>Cras:</strong> at mauris eros</td>
</tr>
<tr>
    <td><strong>Vivamus:</strong> id odio mi</td>
    <td><strong>Duis:</strong> tellus sapien</td>
</tr>
</table>

我想使用此标记（或非常相似 - 建议欢迎！）：

http://jsfiddle.net/rG2Ea/3/

<div class="selections-item selection-win">
<div class="selection-type">dui</div>
<img class="selection-icon" src="holder.js/35x35" alt="-"/>
<ul class="selection-list">
    <li class="selection-name">Phasellus convallis pellentesque erat</li>
    <li class="selection-attr"><strong>Quisque:</strong> eu dui vitae</li>
    <li class="selection-attr"><strong>Feugiat:</strong> interdum vitae</li>
    <li class="selection-attr"><strong>Cras:</strong> at mauris eros</li>
    <li class="selection-attr"><strong>Vivamus:</strong> id odio mi</li>
    <li class="selection-attr"><strong>Duis:</strong> tellus sapien</li>
</ul>
</div>

但正如你在我尝试使用CSS时看到jsfiddle一样，布局很糟糕。我遇到的问题是：

选择类型的“行间距”和图像，使它们在容器中垂直对齐
获取列表项元素以获得正确的宽度，使它们堆叠在一起。我希望每条线上有两个，如表
让它变得流畅 - 在父

Answer 1

你确实采取了一个先进的案例来开始学习花车，但我试了一下，这就是我提出的：http://jsfiddle.net/rG2Ea/4/

作为对你问题的回答：

实际上，只有浮点数才能实现行跨度没有js。对齐垂直只是css中的b * tch。这就是我的原因提示图标并输入absolute。我把它们垂直居中将顶部设置为50％，将margin-top设置为将其高度减半。该左侧位置只是玩像素值的问题。
通过向ul添加一些填充 - 我为图标和类型创建了一些空间，因为定位它们绝对会将它们从流程中提取出来该文件（他们更长时间'推'他们的兄弟姐妹）。自从 ul是一个非浮动块级元素，它会自动填充向上扩展它的父级宽度，给你100％的流体宽度通缉。
由于上述更改，width:50%现在可以正常使用li，您可以获得所需的两个不错的列。确保不要添加任何水平填充或边距，因为这将导致它们显示在一列中。

相关的css看起来像这样：

.selection-type {
    text-transform: uppercase;
    width: 50px;
    position: absolute;
    line-height: 35px;
    left: 15px;
    top: 50%;
    margin-top: -17px;
}

img.selection-icon {
    position: absolute;
    height: 35px;
    width: 35px;
    left: 65px;
    top: 50%;
    margin-top: -17px;
}
.selection-list {
    padding-left: 125px;
    overflow: hidden;
}

希望这能帮到你。请随意询问您是否希望我进一步解释。

Answer 2

您需要添加浮动对齐左侧的第一个块，并为它们提供适当的宽度和边距以便正确对齐。

一个例子可能是：

.selection-type, .selection-icon, .selection-list {float: left}
.selection-type {width: 100px;}
.selection-icon {margin-left: 100px; width: 50px;}
.selection-list {margin-left: 150px;}

Answer 3

如果不了解元素代表什么，这可能是您轻松实现CSS和语义标记的最佳平衡。

http://cssdeck.com/labs/zrzoossj

.selections-item {
  display: table;
  width: 100%;
}
.selection-win {
    background-color: blue;
    color: white;
}
.selection-type,
.selection-icon,
.selection-list {
  display: table-cell;
}
.selection-type {
    text-transform: uppercase;
    width: 100px;
    vertical-align: middle;
    text-align: center;
}

.selection-icon {
  vertical-align: middle;
}
.selection-list dl {
    columns: 2;
}

.selection-list {
  -webkit-columns: 2;
  -moz-columns: 2;
  columns: 2;
}

.selection-list h1 {
  font-size: inherit;
  margin: 0;
}

.selection-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

<div class="selections-item selection-win">
  <div class="selection-type">dui</div>
  <div class="selection-icon"><img src="http://placehold.it/35x35" alt="-" /></div>
  <div class="selection-list">
    <h1>Phasellus convallis pellentesque erat</h1>

    <ul>
        <li><strong>Quisque:</strong> eu dui vitae</li>
        <li><strong>Feugiat:</strong> interdum vitae</li>
        <li><strong>Cras:</strong> at mauris eros</li>
        <li><strong>Vivamus:</strong> id odio mi</li>
        <li><strong>Duis:</strong> tellus sapien</li>
    </ul>
  </div>
</div>

该列表看起来可能更适合作为定义列表，但是根据需要显示CSS会比它的价值更麻烦。

如何使用CSS生成这种类似于表的布局

3 个答案: