相关疑难解决方法(0)

我希望在同一行上有两个项目,左边的项目使用'float:left'.

单凭这一点我没有任何问题.问题是,即使你非常小的浏览器调整大小,我希望这两个项目保持在同一行.你知道......就像桌子一样.

无论如何,目标是保持右边的物品不被包裹.

那么如何告诉浏览器使用css我宁愿拉伸包含div而不是包装它以便float: leftdiv 在div之下div？

例如:我想要的:

                                   \
 +---------------+  +------------------------/
 | float: left;  |  | float: right;          \
 |               |  |                        /
 |               |  |content stretching      \   Screen Edge
 |               |  |the div off the screen  /  <---
 +---------------+  +------------------------\
                                             /

我已经在SO上看过几次这样的问题,并且给出了相同的答案,这些答案在Chrome或Firefox中无效.

我想让一组左浮动的div运行,水平的父div与水平滚动条.

我能够在这里展示我想用这个糟糕的内联css做什么:http://jsfiddle.net/ajkochanowicz/tSpLx/3/

但是,根据SO*给出的答案,这应该有效,但不是我的结论. http://jsfiddle.net/ajkochanowicz/tSpLx/2/

有没有办法在不定义每个项目的绝对定位的情况下做到这一点？

*例如防止浮动的div包裹到下一行

我有4个div设置为向左浮动,但是结束div在一个较小的屏幕上保持包裹两个新线,这真的很烦我...我希望它们随着屏幕尺寸缩放,所以它们总是保持在同一条线上屏幕尺寸...我试图不使用一个表(这是非常诱人的给他们v.reliable为此!!!)

我想知道如何解决这个烦人的问题,所以无论屏幕尺寸如何,它们总能保持在原位？

我有这个作为我的CSS:

.wrapper{
    margin:0 auto;
    width: 80%;
    display: table-cell;
}
.gridf{
    float:left;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.grid{
    float:left;
    margin-left: 3px;
    margin-right:3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}
.gridl{
    float:left;
    margin-left: 3px;
    width:200px;
    min-height:200px;
    border:1px solid white;
}

我的HTML:

<div style="overflow: hidden;">

 <div class="wrapper">

        <div class="gridf"></div>
        <div class="grid"></div>
        <div class="grid"></div>
        <div class="gridl"></div>

 </div> 



</div>

请帮忙:D

我想垂直对齐左侧浮动图像右侧的多行文本.

然而

• 图像尺寸(高度和宽度)将有所不同,并且事先未知
• 文本的长度也各不相同,通常包含多行
• 解决方案需要响应以适应不同的屏幕尺寸
• 解决方案不应涉及图像,div或其他任何内容的特定px宽度或高度尺寸
  • 我不想使用表格,因为当图像旁边的文字空间不足时,在某些情况下文本需要放在图像下方

我回顾过以前的问题,但没有什么能与我想要的完全匹配.它需要在任何设备上工作,因此我不能将绝对px值用于任何维度.

我应该如何设计以下样式来实现这一目标？

<img src="image.jpg" >

<p>Here is the text that should go to the right of the image</p>

谢谢你的帮助.