Question

我有这样的布局：

[left-image]            | [title-------------------------------------]
(width up to 150)       | [left-floated-p -----------[right-floated-p]
                        |
                        | lots of text................................

我能实现这一目标的唯一方法是在“左图”上使用float:left并在右侧内容上显示：table-row。

问题是这在IE 7中似乎不起作用：（

是否有任何修复方法？或实施这种布局的其他替代方案？请注意，我不能在右侧块上使用margin-left因为我不知道左侧图像的确切大小+我在右侧有2个浮动并且清除它们会使布局混乱......

Answer 1

不幸的是IE 7 doesn't support it。快速解决方案：

<强> CSS

<style type="text/css">
  #wrapper {
    width: 800px;
    margin: 0 auto;
  }

  #leftcol {
    width: 150px;
  }

  #rightcol {
    width: 650px;
  }

  #twocols {
    overflow: auto;
  }

  #leftp,#rightp {
    width: 325px;
  }

  #leftcol, #leftp {
    float: left;
  }

  #rightcol, #rightp {
    float: right;
  }
</style>

<强> HTML

<div id="wrapper">
  <div id="leftcol"><img src="yourimage.jpg" /></div>
  <div id="rightcol">
    <h1>Title</h1>

    <div id="twocols">
      <p id="leftp">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed iaculis augue. Proin accumsan tortor at dui imperdiet pellentesque. In eu purus vulputate orci porta scelerisque. Maecenas eget purus mauris, et sagittis turpis. Phasellus bibendum elit et risus dignissim gravida. Quisque feugiat mauris sit amet urna porta imperdiet. Proin feugiat rhoncus orci dictum mattis.</p>
      <p id="rightp">Praesent condimentum, dolor eu aliquet adipiscing, neque est vestibulum nunc, id dignissim tortor risus sed tortor. Donec luctus scelerisque ornare. In fringilla ullamcorper erat, convallis adipiscing nulla adipiscing ut. Nunc convallis consequat tellus ut aliquam. Vivamus tortor tortor, lacinia eget dignissim sed, pharetra ac risus. Vestibulum quis condimentum turpis. Maecenas magna tellus, dignissim eu suscipit id, placerat quis metus.</p>
    </div>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia, nulla quis tempus tempus, arcu velit elementum risus, consectetur rutrum diam odio vitae mi. Curabitur euismod tincidunt ipsum, id volutpat lectus bibendum eget. Nam at pulvinar felis. Vestibulum non lectus id turpis congue tempor sed eget orci. Sed pellentesque felis vitae augue cursus ac gravida arcu tincidunt. Aenean et sem lectus. Curabitur vehicula odio lorem. Morbi ultricies fermentum dolor, vitae convallis leo condimentum at. Pellentesque faucibus justo non enim varius varius. Nulla accumsan feugiat orci, egestas laoreet mauris rhoncus non. In lacinia purus in magna pulvinar et sollicitudin urna mollis. In eleifend augue ac sem suscipit eget adipiscing odio gravida. Nam tincidunt dui pharetra lacus bibendum volutpat. Integer faucibus luctus magna, et eleifend metus iaculis vitae. Cras imperdiet dignissim mi, porta elementum elit dignissim non. Ut egestas congue elit quis volutpat. Nunc ac massa neque.</p>

    <p>Praesent id lectus felis. Phasellus sapien leo, ultrices nec rhoncus a, tincidunt in lacus. Mauris tincidunt volutpat nisi, quis viverra ligula pellentesque semper. Phasellus sem sem, tristique vitae sollicitudin eu, tincidunt egestas felis. Aliquam id nunc augue. Integer lectus dolor, lacinia non pellentesque non, elementum at lorem. Donec nec vulputate magna. Vestibulum lobortis risus a elit fringilla dapibus congue tellus tincidunt. Nulla a eleifend justo. Sed nec nisl augue, id vulputate ante. Vestibulum dapibus tristique nisl, non consequat nisi bibendum sit amet. Phasellus quis diam orci, et fringilla est. Morbi quis aliquam ante. Donec bibendum suscipit magna tempus feugiat. Mauris ultricies, neque sed venenatis lacinia, nulla magna scelerisque libero, vitae pharetra urna mi eget nunc. Nullam tellus quam, sagittis a volutpat id, imperdiet vel libero. Curabitur fringilla velit id ligula faucibus dapibus. Aliquam id augue leo. Aenean ac felis vel lectus commodo tempus.</p>

    <p>Fusce facilisis facilisis enim et pharetra. Vivamus luctus pellentesque accumsan. Mauris sem metus, ullamcorper vel ornare in, eleifend id risus. Pellentesque viverra lacinia nulla eget hendrerit. Integer consequat egestas placerat. Etiam libero nisl, euismod in tristique ac, convallis eget purus. Nulla vulputate quam sit amet purus consectetur dapibus. Etiam aliquet purus non felis sagittis porta. Fusce id libero nibh. Ut auctor odio sed leo iaculis ut faucibus leo blandit. Maecenas imperdiet enim imperdiet elit hendrerit mattis. Etiam mauris ipsum, malesuada eget posuere eget, molestie quis sem. In commodo consequat arcu laoreet fermentum. Duis et magna massa, et molestie magna.</p>
  </div>
</div>

你需要让文字和标题更漂亮，但这很有效。

Answer 2

实现此类布局的最佳选择是使用blueprintcss，yahoo grid等网格框架。

Answer 3

我觉得这样的事情会起作用

 <div id="wrapper">
    <div id="leftImage">Hello</div>
    <div id="rightSide">
      <!-- Right side things here -->
    </div>
  </div>


#wrapper {
  width:400px;
    height:400px;
    background:red;
}

#leftImage {
  position:absolute;
  width:200px;
    height:200px;

    background:blue;
}
#rightSide {
  position:relative;
  width:200px;
    height:200px;
    background:green;
    float:left;
    margin-left:200px;
}

Answer 4

使用Gert G在其答案中使用的相同HTML代码，以下是使用display: inline-block;的替代方法：

#wrapper {
    width: 960px;
}

#leftcol {
    display: inline-block;
    width: 150px;
    vertical-align: top;
}

#rightcol {
    display: inline-block;
    width: 800px;
}

Conditional comment for IE<8
#leftcol, #rightcol { display: inline; zoom: 1; }

如果您在#rightcol的结尾标记与#leftcol的开头标记之间删除空格，则

#rightcol的宽度可以为810px

Answer 5

如果标题的高度和段落高度是静态/

只需在左侧图像上写下边距。你不需要页面右侧的额外列/

身高（标题和段落）= X; margin-bottom（img）= X + 100; （为您的文字;）

btw文本应该在分区/

中

max-width（img）= 150px;

min-width（div.all或body）= width（img）+ width（右边的文字）/

CSS - 显示：table-row？

5 个答案: