Question

所以我有两个元素彼此相邻浮动，一个具有设置宽度，另一个需要是一个百分比，这样当窗口/浏览器调整大小时，内容将随之流动。但是，当窗口大小小于某个比率时，我无法保持内容彼此相邻。

这是我的css代码：

.box {
    width: 50px;
    height: 50px;
    float: left;
    margin-right: 10px;
    background-color: blue;
}

p {
    width: 95%;
    float: left;
    margin: 0;
    padding: 0;
}

有解决方法吗？这是我的小提琴，所以你可以看到发生了什么。 My example

如果你缩小尺码，你会看到P标签在框下方落下。

Answer 1

如果你不知道div.box的宽度（正如你在评论中所说的那样），那么你可以position:relative使用p标签来实现这一目的。

p{ 
  position:relative;
  /* anchoring top, left and right sides */
  top:0px;
  right:0px;
  left:0px; 
  margin:0; 
  padding:0; 
}

Working Fiddle

Working Fiddle（有两个div）

Answer 2

如果框是固定宽度，您可以使用以下样式：

.item {
    padding-left: 60px;
}

.box {
    width: 50px;
    height: 50px;
    float: left;
    margin-left: -60px;
    background-color: blue;
}

p {
    width: 100%;
    float: left;
    margin: 0;
    padding: 0;
}

http://jsfiddle.net/3QhzS/1/

否则你需要添加一点jquery来动态添加样式：

http://jsfiddle.net/3QhzS/6/

如果窗口调整大小，如何正确浮动两个元素而不会破坏

2 个答案: