CSS two divs next to each other-第2页回答

I want to put two <div>s next to each other. The right <div> is about 200px; and the left <div> must fill up the rest of the screen width? How can I do this?

标签： html css

13条回答

余生请多指教

2楼-- · 2019-01-01 08:40

I ran into this problem today. Based on the solutions above, this worked for me:

<div style="width:100%;"> 
    <div style="float:left;">Content left div</div> 
    <div style="float:right;">Content right div</div> 
</div>

Simply make the parent div span the full width and float the divs contained within.

0人赞添加讨论(0) 举报

心情的温度

3楼-- · 2019-01-01 08:40

div1 {
    float: right;
} 
div2 {
    float: left;
}

This will work OK as long as you set clear: both for the element that separates this two column block.

0人赞添加讨论(0) 举报

何处买醉

4楼-- · 2019-01-01 08:43

To paraphrase one of my websites that does something similar:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <style TYPE="text/css"><!--

.section {
    _float: right; 
    margin-right: 210px;
    _margin-right: 10px;
    _width: expression( (document.body.clientWidth - 250) + "px");
}

.navbar {
    margin: 10px 0;
    float: right;
    width: 200px;
    padding: 9pt 0;
}

  --></style>
 </head>
 <body>
  <div class="navbar">
  This will take up the right hand side
  </div>
  <div class="section">
  This will fill go to the left of the "navbar" div
  </div>
 </body>
</html>

0人赞添加讨论(0) 举报

听够珍惜

5楼-- · 2019-01-01 08:45

Unfortunately, this is not a trivial thing to solve for the general case. The easiest thing would be to add a css-style property "float: right;" to your 200px div, however, this would also cause your "main"-div to actually be full width and any text in there would float around the edge of the 200px-div, which often looks weird, depending on the content (pretty much in all cases except if it's a floating image).

EDIT: As suggested by Dom, the wrapping problem could of course be solved with a margin. Silly me.

0人赞添加讨论(0) 举报

与风俱净

6楼-- · 2019-01-01 08:45

The method suggested by @roe and @MohitNanda work, but if the right div is set as float:right;, then it must come first in the HTML source. This breaks the left-to-right read order, which could be confusing if the page is displayed with styles turned off. If that's the case, it might be better to use a wrapper div and absolute positioning:

<div id="wrap" style="position:relative;">
    <div id="left" style="margin-right:201px;border:1px solid red;">left</div>
    <div id="right" style="position:absolute;width:200px;right:0;top:0;border:1px solid blue;">right</div>
</div>

Demonstrated:

left right

Edit: Hmm, interesting. The preview window shows the correctly formatted divs, but the rendered post item does not. Sorry then, you'll have to try it for yourself.

0人赞添加讨论(0) 举报

栀子花@的思念

7楼-- · 2019-01-01 08:48

You can use flexbox to lay out your items:

#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
  /* Just so it's visible */
}
#wide {
  flex: 1;
  /* Grow to rest of container */
  background: lightgreen;
  /* Just so it's visible */
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

This is basically just scraping the surface of flexbox. Flexbox can do pretty amazing things.

For older browser support, you can use CSS float and a width properties to solve it.

#narrow {
  float: right;
  width: 200px;
  background: lightblue;
}
#wide {
  float: left;
  width: calc(100% - 200px);
  background: lightgreen;
}

<div id="parent">
  <div id="wide">Wide (rest of width)</div>
  <div id="narrow">Narrow (200px)</div>
</div>

0人赞添加讨论(0) 举报

CSS two divs next to each other

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间