0

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

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

其中一个属性值项还包含一个按钮，这里只是用一个跨度来表示。按钮应放置在属性之后的同一行中。

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

  • 属性列表的格式不正确。我想这是因为我无法将包含的列表项配置为扩展到全宽。最后，属性值项应显示在同一行。

  • 标题带有下划线，我希望看到下划线延伸到正文的整个宽度。目前它已被截断，我无法找到实现这一目标的方法。

我创建了一个小提琴，它应该显示问题：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>
4

3 回答 3

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

看看这里

于 2013-03-05T22:09:40.370 回答
1

简答

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

长答案

您使用的 HTML 标记应尽可能与它们所代表的内容在语义上相关。因此，使用ulorol表示事物列表，使用img图像，并使用标题标签（h1、h2等）作为标题。这里不需要使用tables （通常不赞成布局，因为它们违反了这种语义逻辑）。在这里，我保留了您的结构和 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，但正确的填充（或边距，如果您愿意）意味着它不会与封面图像重叠。

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

于 2013-03-05T22:48:07.457 回答
0

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

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

我在你的 bookdetail课程上添加了 width: 100%

.bookdetail {
    vertical-align:top;
    display: inline-block;
    width: 100%;
}
于 2013-03-05T21:58:27.180 回答