Question

我对css很陌生，并试图创建一个展示书籍列表的布局。因此，我想在两列布局的左侧显示封面图像（由小提琴中的固定宽度div表示）。在封面右侧，我想要提供有关该书的信息：标题和有序列表，其中包含属性值项。

这些项目应填充宽度的剩余部分。属性及其对应的值应放在同一行。

其中一个属性值项还包含一个按钮，该按钮仅由此处的span表示。按钮应放在属性后面的同一行。

我遇到了几个问题，到目前为止我无法解决这个问题：

属性列表格式不正确。我想这是因为我无法将包含列表项配置为扩展到整个宽度。最后，属性值项应显示在同一行。
标题下划线，我希望看到下划线延伸到身体的整个宽度。目前它已被截断，我无法找到实现这一目标的方法。

我创造了一个小提琴，它应该显示问题：http://jsfiddle.net/7Xeb7/3/

这是我的基本html结构：

<body>
    <ul class="book">
        <li>
            <div class="cover"></div>
        </li>
        <li class="bookdetail">
            <div class="title">Title</div>
            <ol class="attributes">
                <li>
                    <span class="property">property <span>btn</span></span>
                    <span class="value">value</span>
                </li>
                <li>
                     <span class="property">property</span>
                    <span class="value">value</span>
                </li>
            </ol>
        </li>
    </ul>
</body>

Answer 1

我已使用div和tables

相应地更改了您的布局

<div class="leftColumn">

    </div>

    <div class="rightColumn">
        <div class="header">
            Title
        </div>

        <div class="content">
            <table width="100%">
                <tr><td>Property1<td><td>Value</td>
                <tr><td>Property2<td><td>Value</td>
                <tr><td>Property3<td><td>Value</td>
            <div>
 </div>

和css

.leftColumn
{
    float:left;
    width:30%;
    height:250px;
    background-color:red;
}
.rightColumn
{
    float:right;
    width:70%;
    height:250px;
    background-color:green;
}
.header
{
    font-size:25px;
    padding:15px;
    height:30px;
    verticle-align:middle;
    border-bottom:1px solid #ccc;    
}

有一个look here

Answer 2

简答

您的HTML比必要的更复杂，并且非常规地使用列表元素来处理非真正列表的内容。简化它可以使页面样式更容易。我已经在这个jsFiddle中这样做了，我认为通过绝对定位.cover并向.bookdetails：http://jsfiddle.net/7Xeb7/10/添加适当的填充来解决您的问题。（编辑：新jsfiddle反映评论）

长答案

您使用的HTML标记应尽可能与其所代表的内容在语义上相关。因此，对于事物列表，请使用ul或ol，对图片使用img，并使用标题标记（h1，h2等）作为标题。这里没有必要使用table（因为它们违反了这种语义逻辑，因此通常不赞成布局）。在这里，我保留了您的结构和CSS类，但使用了更多逻辑标记：

    <div class="book">
        <img class="cover" src="" alt="Book Title Here" />
        <div class="bookdetail">
            <h2 class="title">Title</h2>
            <ol class="attributes">
                <li>
                    <span class="property">property</span> <!-- this span wasn't closed before! -->
                    <span class="button">btn</span></span>
                    <span class="value">value</span>
                </li>
                <li>
                    <span class="property">property</span>
                    <span class="value">value</span>
                </li>
            </ol>
        </div><!-- /.bookdetail -->
    </div><!-- /.book -->

清理完HTML后，您可以更轻松地进行必要的CSS更改。您的主要问题是将.bookdetail放在正确的位置。目前很难，因为你试图平衡一个固定宽度的元素（.cover）和一个你想要占据整个容器的可变宽度元素（.bookdetail） - 除了对于固定宽度的元素。

通过绝对定位.cover可以相当容易地解决这个问题，因此它不再对.book中其他元素的定位产生任何影响。然后你可以将.bookdetail的填充设置为0 0 0 140px - 它自动相对于具有指定位置的最新父元素，我已经.book。因此，.bookdetail会根据需要展开以填充book，但正确的填充（或边距，如果您愿意）意味着它不会与封面图像重叠。

我还在jsFiddle中进行了一些其他的CSS更改，以使.title更好地显示并适应我的HTML更改，但它们与解决主要问题没有直接关系所以我会留下它们那里。

Answer 3

您缺少维度的宽度属性，但不确定这是否是您希望看到它的方式：

http://jsfiddle.net/Riskbreaker/7Xeb7/4/

我在 bookdetail 类

上添加了宽度：100％

.bookdetail {
    vertical-align:top;
    display: inline-block;
    width: 100%;
}

ul内的ol并使某些列表项扩展到父元素的宽度

3 个答案: