标签: css-float

我通常使用表格进行布局.但我想尝试在Div中进行布局.这是问题,当我"浮动:左"一个div时,它使随后的div随之漂浮.我试图将"float:none"放到下一个div中,以使它断开一条线但是它不起作用.

这是我想用表做的事情:

<hr style="width: 100%;" />
<table>
  <tr>
    <td>
      <div id="divLeftPane">
        ...
      </div>
    </td>
    <td>
      <div id="divCenterPane">
        ...
      </div>
    </td>
    <td>
      <div id="divRightPane">
        ...
      </div>
    </td>
  </tr>
</table>
<hr style="width: 100%;" />

这是我到目前为止尝试使用float的div:

<hr style="width: 100%;" />
<div id="divContainer">
  <div id="divLeftPane" style="float: left;">
    ...
  </div>
  <div id="divCenterPane" style="float: left;">
    ...
  </div>
  <div id="divRightPane">
    ...
  </div>
</div>
<hr style="width: 100%;" />

使用div的问题是底部

我在SO中发现了很多这个问题的变化,但似乎无论我尝试什么,我都无法得到这个(看似非常简单!)的工作!

我要做的是将"居中" div保持在视口的中心,并将"侧边栏" div直接放在右侧(即不与视口右对齐),而不会影响'中心" DIV.

这是jsfiddle上的一些测试代码:

http://jsfiddle.net/6wCyr/13/

我读过的所有内容似乎都暗示浮动属性正是我正在寻找的,但是链接中的结果显示我得到了奇怪的结果,其中右侧边栏位于"居中" div 下方而不是旁边.这就是链接中显示的内容.

我也看到了一个解决方案,涉及对正确的属性使用负值,并准确设置侧边栏的宽度,但我也无法得到那个.

希望这个问题像我认为的那样容易解决!似乎无法在div中找到正确的div组等等.很难调试这些对齐问题!

谢谢!

我有一些像这样的代码:

<style>
.box {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: green;
    border: 1px solid black;
    float: left;

}

#wrapper {
    position: relative;
}
</style>


<div id="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>

我需要得到相对于#wrapper的每个框的左上角.我试图通过jQuery.position()来做到这一点,但是,我没有得到正确的结果.继续获得0,0.任何人都可以.我认为这里的问题是花车......如果它们绝对定位,我会正确阅读它们.

我想在我现有的博客上重新创建以下页面的外观:http: //jeff.klukas.net/bio/

这里的标志是我们有两列,左边的图像和右边的文字,没有文字包裹在图像下面.此外,图像出现在垂直位置,将它们置于文本的上下文中.

当前设计使用Blueprint CSS,每对图像和文本都有成对的div.我想创建一个自适应设计,可以缩小到单个列以获得更小的浏览器宽度,因此源(从Markdown生成)看起来像:

<img src=img1.png>
<p>First paragraph...</p>
<img> src=img2.png>
<p>Second paragraph...</p>

哪个会在狭窄的屏幕上显示为:

------------
|img1      |
------------
First paragraph
------------
|img2      |
------------
Second paragraph

或者在宽屏幕上:

------------  First paragraph...
|img1      |  more text more text
------------  more text more text
              more text more text
              more text more text
              more text more text.
------------  Second paragraph...
|img1      |  more text more text
------------  more text more text
              more text more text
              more text more text
              more text more …

我有许多行中浮动的div。div包含文本预览和向下滑动全部内容的链接（有关示例，请参见http://jsfiddle.net/yDcKu/）。

现在发生的情况：向下滑动content-div时，它将在连接的预览之后立即打开。我要发生的事情：在该行的最后一个div之后打开content-div。

我认为可以通过以下方式完成此操作：
1.找出哪个div是激活的预览行中的最后一个div；
2。向该div添加一个id；
3。将content-div附加到该div。

我有一个使用jQuery的第2步和第3步的解决方案，但不知道如何进行第一步。我可以设法获取每个div的文档宽度以及x和y值，但我不知道如何找出哪个div具有最高的x和y值，并且也位于激活的预览分区。

有人知道吗？谢谢

我正在尝试使用以下方法将十六进制值转换为float(Python 2.7):

def hex2float(x):
    y = 0
    z = x.decode('hex') 
    try:
        y = struct.unpack('!f', z)[0]
    except:
        print sys.exc_info()[1]    
    print 'z = ' + z 
    print 'y = %s' % (y) 
    print 'x = ' + x
    return

def foo28():
    x = '615885'   #8.9398e-039
    hex2float(x)

输出如下:

unpack requires a string argument of length 4
z = aXà
y = 0
x = 615885

我注意到我得到了非常小的值的异常消息.在这种情况下,是否有正确的方法将十六进制值转换为浮点值.

看起来每当我向右浮动两个元素时,它们就会被交换掉.左浮动元素不会发生这种情况,它似乎出现在每个浏览器中.

这是一个例子:

码:

<style type="text/css">
    .right {
        float: right;
    }
</style>
<div class="right">DIV ONE</div>
<div class="right">DIV TWO</div>

显示效果:

DIV TWO DIV ONE

这不是一个重大问题,但在与同事交换代码时确实会引起混淆.有没有办法防止这种情况发生？

这个问题可能有一个简单的解决方案

我设计了一个并排两列的网站.一切都是固定的(菜单栏和左栏),右栏除外.

这是故意的,因为我只想要滚动右列,它将保存页面的可读内容.一切都很好,对吗？

不完全是,左列向左浮动,右列也浮动有足够大的左边距,以便在加载时正确地坐在页面中.

但是当屏幕水平太小时,用户可以向左和向右滚动,同时移动第二列,甚至在我固定的第一列下方.这就是我想要阻止的.

如何让第二列垂直滚动但不能水平移动？

这是一个css的snipet:

#main-content {float: left; margin: 100px 0 0 0; background: rgba(128,127,128,0.9); padding: 15px 25px 15px 15px; width: 500px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
#button-glue {float: left; position: fixed; padding: 0 25px 15px 0px; width: 525px;}
#button{
    float:right; margin: 5px -20px 0 0;
}
#button a {
    background:url(../images/button.png) 
    no-repeat;
    display:block; /* Necessary, since A is not a block element */
    width: 167px;
    height: 58px; 
}
#button a:hover {
    background:url(../images/buttonhover.png) no-repeat;
    width:167px;
    height:58px;
}
.right …

这是问题所在:我希望在同一行中有2个浮动div.右div可以是固定宽度.left div应该占用所有的空间,并将文本包装在里面.父容器宽度是可变的,所以我不能在两个div上设置宽度.

http://jsfiddle.net/af6wP/

div{border: 1px solid black}
.left{float: left}
.right{float: right}
<div class="left">
    very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text very long text 
</div>

<div class="right">
    short text
</div>

我有以下HTML:

<div class="container">
    <ul>
        <li><img src="30x30.gif" /></li>
        <li><img src="30x30.gif" /></li>
        <li><img src="30x30.gif" /></li>
    </ul>
    <div style="clear: both" />
</div>

我希望这些图像沿着水平线很好地串在一起,所以我应用以下CSS:

div, p, ul, li {
    margin: 0;
    padding: 0;
    list-style: none;
}

div.container > ul li {
    float: left;
    background-color: yellow;
}

这有效.但是,由于某种原因,<li>元素底部有4px的间隙.我知道这是因为我可以看到黄色背景的条子(只是在底部,而不是一直到处).

你可以在这里看到这种情况的一个例子:http://jsfiddle.net/DBcPw/

注意:这似乎只在<li>元素包含图像时发生.如果我尝试使用<p>元素,则不会出现问题.

所以,我的两个问题是:

1. 为什么会这样？
2. 我该怎么办才能修复它？