0

我不太擅长 CSS。我知道很多属性，但在浮动 div 和更高级的方面我有点绿色。

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

http://jsfiddle.net/hkCcY/3/

<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>

但是正如您在 jsfiddle 在我尝试 CSS 时所看到的那样，布局是可怕的。我遇到的问题是：

  • 选择类型和图像的“行跨度”，因此它们在容器中垂直居中对齐
  • 获取列表项元素以获得正确的宽度，以便它们彼此堆叠。我希望每行有两个，就像表格中一样
  • 让它变得流畅 - 在父级中扩展到 100% 宽度
4

3 回答 3

2

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

作为对您的问题的回答：

  • 仅使用浮点数而没有 js，实际上无法实现行跨度。垂直对齐只是 css 中的 ab*tch。这就是为什么我放置图标并输入absolute。我通过将顶部设置为 50% 将它们垂直居中，并将顶部边缘设置为高度减半。左边的位置只是玩像素值的问题。
  • 通过添加一些 padding-left 到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;
}

希望这对您有所帮助。随时询问您是否希望我进一步解释。

于 2013-05-27T22:04:18.583 回答
0

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

一个例子可能是：

.selection-type, .selection-icon, .selection-list {float: left}
.selection-type {width: 100px;}
.selection-icon {margin-left: 100px; width: 50px;}
.selection-list {margin-left: 150px;}
于 2013-05-27T21:34:17.590 回答
0

在不了解元素代表什么的情况下，这可能是易于实现 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 按需要显示比它的价值更麻烦。

于 2013-05-28T01:26:51.020 回答