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

Question

所以我有两个元素彼此相邻浮动，一个有一个固定的宽度，另一个需要一个百分比，这样当窗口/浏览器调整大小时，内容就会随之流动。但是，当窗口大小小于某个比例时，我无法让内容彼此相邻浮动。

这是我的CSS代码：

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

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

有没有解决的办法？这是我的小提琴，所以你可以看到发生了什么。 我的例子

如果你把尺寸变小，你会看到 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(with two div's)

Answer 2

If the box is a fixed width you can use the following styles:

.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/

otherwise you will need to add a little bit of jquery to it to add styles on the fly:

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