CSS项目无法正确呈现

Question

I want to create a sortable list in which sorting features will be in left column and right column will contain the list items (the items are blocks with some information)

I have written following code :

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

However, the list items somehow end up messing with the layout. Here's the screenshot..

How to correct this? Also, is there any easy way like some WYSIWYG editor for such CSS designs?

Answer 1

To achieve the layout you wanted, I changed the box-model to border-box which means that padding given to an element becomes part of it's width. ( http://css-tricks.com/the-css-box-model/ )

I added a clearfix class to parent elements that hold floated children, because this causes the parent to collapse. ( http://css-tricks.com/all-about-floats/ )

fiddle: http://jsfiddle.net/dHc8W/

Code:

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

These may or may not work depending on how you want the 'content' to display.
But as far as I can tell with the given code they give the desired result.
You'll probably want to adjust the padding: and margin: if you want it flush with the top.

Solution #1

This method will behave strangely if the actual content is greater than the max-width: .
Works with smaller content.

CSS

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

http://jsfiddle.net/sP6t2/

Solution #2 (suggested method)

if you want the content to always be longer, decreasing to width:84% will bump up the content.

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