English 中文(简体)
我怎么能够用固定宽度的一栏和剩余的宽度排出两栏?
原标题:How can I have a 2 column layout with one of the columns with a fixed width and the other with the remaining width?
  • 时间:2011-07-09 21:20:05
  •  标签:
  • html
  • css

我有两个栏目。 左栏的宽度为300皮克。 我希望右栏能够全面占用剩余的监测空间。 但是,我仅能指出,这种百分数和百分数的混合物如何能够发挥作用? 没有人有什么想法?

更糟糕的是,我会利用 j,使用户的感受大到宽,以动态的方式增加一些行文风格,但我不得不在每家窗户转播时这样做。 因此,我完全会有一个纯粹的解决办法。

最佳回答

I would prefer thirtydot s answer:

Demo fiddle

Minimum CSS requirement:

#sideBar {
    width: 300px;
    float: left;
}
#mainContent {
    overflow: hidden;
}
问题回答

一种做法是将固定的宽度排在左边,然后使用宽度模拟你的另一栏。 与此类似:

<div id="sidebar">
    <!-- ... -->
</div>
<div id="content">
    <!-- ... -->
</div>

And some CSS:

#sidebar {
    float: left;
    width: 300px;
}
#content {
    margin-left: 300px;
}

A <div> with its default display:block will naturally take up all the available width. The 300px left margin leaves an open space for the fixed width column.

例:

http://jsfiddle.net/mqchen/RDLMm/“rel=“nofollow”





相关问题
CSS working only in Firefox

I am trying to create a search text-field like on the Apple website. The HTML looks like this: <div class="frm-search"> <div> <input class="btn" type="image" src="http://www....

image changed but appears the same in browser

I m writing a php script to crop an image. The script overwrites the old image with the new one, but when I reload the page (which is supposed to pickup the new image) I still see the old one. ...

Firefox background image horizontal centering oddity

I am building some basic HTML code for a CMS. One of the page-related options in the CMS is "background image" and "stretch page width / height to background image width / height." so that with large ...

Separator line in ASP.NET

I d like to add a simple separator line in an aspx web form. Does anyone know how? It sounds easy enough, but still I can t manage to find how to do it.. 10x!

热门标签