Question

我想创建一个可排序列表，其中排序功能将位于左列，右列将包含列表项（项目是包含某些信息的块）

我写了以下代码：

HTML：

<div id="container" style="width:auto;">
        <div id="item-menu">
        Sort items by :  </div>
        <div id="content-items">
            <div id="item"> content</div>
            <div id="item"> content</div>
        </div>
</div>

CSS：

#item-menu {
    width:15%;
    float:left;
    border-right:1px dotted #333333;
}

#content-itemss {
    float:left;
    padding-left:20px;
    width:85%;
}

#item {
    display:block;
    background:#333;
    border:1px dotted #000000;
    color:#FFF;
    width:inherit;
    margin:10px 10px;
    padding:10px 10px;
}

然而，列表项目不知何故最终弄乱了布局。这是截图.. Items are not going in the right part where they should

如何纠正？还有，像这样的CSS设计的一些WYSIWYG编辑器有什么简单的方法吗？

Answer 1

为了实现您想要的布局，我将box-model更改为border-box，这意味着赋予元素的填充将成为其宽度的一部分。（http://css-tricks.com/the-css-box-model/）

我向包含浮动子节点的父元素添加了一个clearfix类，因为这会导致父节点崩溃。（http://css-tricks.com/all-about-floats/）

小提琴：http://jsfiddle.net/dHc8W/

代码：

* { box-sizing: border-box; }

.clear:after {
    content: "";
    display: table;
    clear: both;
}
#container {
    width: 100%;
}

#item-menu {
    width:15%;
    float:left;
    border-right:1px dotted #333333;
}

#content-items {
    float:left;
    padding-left:20px;
    width:85%;
}

.item {
    background:#333;
    border:1px dotted #000000;
    color:#FFF;
    width:inherit;
    margin:10px 10px;
    padding:10px 10px;
}

Answer 2

这些可能会或可能不会起作用，具体取决于您希望“内容”的显示方式但据我所知，给定的代码可以得到理想的结果如果您希望它与顶部齐平，您可能需要调整padding:和margin:。

解决方案＃1

如果实际内容大于max-width:，此方法会表现得很奇怪使用较小的内容。

<强> CSS

#content-items {
float:left;
padding-left:20px;
max-width:85%;   /*changed to 'max-width'*/
}

http://jsfiddle.net/sP6t2/

解决方案＃2 （推荐方法）

如果您希望内容始终更长，则减少到width:84%会提升内容。

http://jsfiddle.net/sP6t2/1/

CSS项目无法正确呈现

2 个答案: