相关疑难解决方法(0)

我想把a label和a input[type=text]放在同一条线上,我希望input宽度能够填充包含元素的剩余宽度,而不管标签文本的长度如何(见第一张图片).

我试图用width: auto;的input,但它似乎有一个静态的宽度.我也尝试了width: 100%;,但是这会移动input到一个新的线(见第二张图).

如何使用CSS实现这一目标？

我想要一个有两列的容器.细节:

容器

• 宽度应调整为其父元素的100%(容易完成).
• 高度必须调整为包含两列(即它的高度应该完全等于两列的较大高度,因此没有溢出和滚动条永远不会显示)
• 应该具有等于左列宽度的两倍的最小尺寸.

一般的列

• 应该是可变高度,调整到其内容的高度.
• 应该是并排的,使它们的顶边成一直线.
• 如果边界,填充或边距的单个像素被应用于任何一个像素,则不应该破坏布局或彼此包裹,因为这将是非常不稳定和不幸的.

左列专门

• 必须具有固定的绝对宽度(以像素为单位).

正确的专栏

• 宽度必须填充容器中的剩余空间.换一种说法...
• 宽度必须等于容器宽度减去左列的宽度,这样如果我在此列中放置一个DIV块元素,将其宽度设置为100%,给它一个类似10px的高度,并给它一个背景颜色,我将看到一个10px高的彩色条带,从左列的右边缘到容器的右边缘(即它填充右列的宽度).

要求稳定

容器应该能够调整大小(通过调整浏览器窗口大小)到最小宽度(前面指定)或更大的宽度而不破坏布局."Breaking"将包括左列改变大小(记住它应该具有固定的像素宽度),右列包裹在左侧,滚动条出现,右列中的块元素未能占用整个列宽并且通常任何上述规范都不能保持真实.

背景

如果使用浮动元素,则右列不应该在左侧包裹,容器将无法包含两列(通过剪切列的任何部分或允许列的任何部分溢出其边界) ),或者那个滚动条会出现(所以我厌倦了建议使用溢出以外的任何东西:隐藏以触发浮动元素遏制).将边框应用于列不应该破坏布局.列的内容,尤其是右列的内容,不应破坏布局.

似乎有一个简单的基于表格的解决方案,但在任何情况下它都会失败.例如,在Safari中,如果容器太小,我的固定宽度左列将收缩,而不是保持我指定的宽度.似乎应用于TD元素的CSS宽度指的是最小宽度,这样如果在其中放置更大的东西,它将扩展.我尝试过使用table-layout:fixed; 没有帮助.我还看到了表示右列的TD元素不会扩展以填充剩余区域的情况,或者它会出现(例如第三列1px宽将被一直推到右侧),但是在右列周围放置一个边框将显示它仅与其内联内容一样宽,并且宽度设置为100%的块级元素不会填充列的宽度,而是匹配内联内容的宽度(即TD的宽度似乎完全取决于内容).

我看到的一个可能的解决方案太复杂了; 我不在乎IE6,只要它适用于IE8,Firefox 4和Safari 5.

对于每个邮箱,我希望缩略图向左浮动,文本向右浮动.我不希望拇指环绕文本.

这是我的HTML代码:

<div class="post-container">                
   <div class="post-thumb"><img src="thumb.jpg" /></div>
   <div class="post-title">Post title</div>
   <div class="post-content"><p>post description description description etc etc etc</p></div>
</div>

我已经尝试了几种方法但仍然无法使其工作......文本将不会显示在右侧...

这是我的CSS代码:

.post-container{
    margin: 20px 20px 0 0;  
    border:5px solid #333;
}

.post-thumb img {
    float: left;
    clear:left;
}

.post-content {
    float:right;
}

这是代码:

<div style="width:400px">
    some text..
    <input type="text" />
    <button value="click me" />
</div>

如何使输入元素展开以填充所有剩余空间,同时保持在同一条线上？如果我把它100%放到它自己的线上......

假设我想要两列.右边是200px宽,左边是占据剩余宽度.这可能吗？我该如何设置左列的宽度？

我想要两个元素占据父元素宽度的精确百分比,但我也需要它们的边距让它们分开.我有以下标记:

<div class='wrap'>
  <div class='element'>HELLO</div><div class='element'>WORLD</div>
</div>?

.wrap {
  background:red;
  white-space:nowrap;
  width:300px;
}
.element {
  background:#009; color:#cef; text-align:center;
  display:inline-block;
  width:50%;
  margin:4px;
}

正如您在http://jsfiddle.net/NTE2Q/中看到的那样,结果是子节点溢出了包装器:

我怎样才能让它们适应空间？可悲的是,box-sizing:margin-box这种情况没有.

这是我很久以前学到的东西之一,从来没有想过我是否真正以正确的方式做到这一点.

假设我们有这样的结构:

<div id="wrapper">
  <div id="sideBar"></div>
  <div id="mainContent"></div>
</div>

我们也说它wrapper的宽度为600px.

我应该漂浮sideBar left,mainContent right还是应该漂浮它们left？

另外,如果我设置一个固定的宽度,sideBar我该如何mainContent填充剩余的空间,类似于表的工作方式？如果我设置mainContent为display:inline-block并向width:100%下移动到下一行:/

注意:在我的特定场景中,我不想使用表格.