Make div container containing multicolumn elements expand to width of columns

I have a number of inline-block elements that contain multicolumn elements within them. The inline-block elements are contained within a nowrap container, with the intent that these scroll horizontally.

The columns are fixed height (so, variable number of columns). However, it looks like the width of each inline-block element is only the width of one column in IE10, and the width of the visible container in Chrome, so some of the columns overlap. Is there a way to get each of the inline-block elements to take up its full width (ie the width of the columns) so there is no overlap?

.outerWrapper {
    white-space: nowrap;
}

.innerWrapper {
    display: inline-block;
    white-space: normal;
}

.columns {
    -webkit-column-width: 100px;
    column-width: 100px;
    height: 500px;
}

JSFiddle: http://jsfiddle.net/ts9xg/

---

Update: I was able to accomplish this by programmatically setting the width of the containers of the CSS3 columns to their scrollWidth:

$(".parent").each(function() {
    $(this).width(this.scrollWidth);
});

JSFiddle: http://jsfiddle.net/ts9xg/11/ (columns no longer overlap)

---

I would like to suggest use table for the layouting. Or you can use table properties to DIV elements. Below is the example given.

HTML

<div class="container">
<div class="containerRow">
    <div class="col1">
        This is column 1
    </div>
    <div class="col2">
        This is column 2
    </div>
    <div class="col3">
        This is column 3
    </div>
</div>
</div>

CSS

.container{border:1px red solid;display:table;table-layout:fixed;}
.containerRow{display:table-row;}
.containerRow > div{display:table-cell;min-height:200px;border:1px green solid;}
.col1{width:100px;}
.col2{width:150px;}
.col3{width:100px;}

http://jsfiddle.net/murli2308/Un4bZ/1/

I think you need the structure like this...

If you are good in tables.. You can use table layouts also...

链接地址: http://www.djcxy.com/p/87828.html

上一篇: 列表名称被可见滚动条打破

下一篇: 将包含多列元素的div容器展开为列宽