How do I float two divs side-by-side without specifying a width?

前端未结

关注

 3  1911

I have two divs, the first doesn\'t have much content and the second has a lot of content. I want them to float side-by-side such that the first div is only as wide as the text

相关标签:

3条回答

野趣味

2021-01-31 21:54
Yes, you can do it with css & it's work in all browsers. Do like this:
```
.right{
    overflow:hidden;
    background:red;
}
.left{
    float:left;
    background:green;
}
```
Check this live example http://jsfiddle.net/enRkR/8/
0 讨论(0)
发布评论:

提交评论
- 加载中...

梦毁少年i

2021-01-31 21:57

<div style="float:left">less content</div>
<div>More content More content
</div>

0 讨论(0)

刺人心

2021-01-31 22:02

Try this :

<div>
  <div id="div1" style="float:left">
     content
  </div>
  <div id="div2" >
     content
  </div>
<div>

refer this : How to style Div elements as Tables

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head><title>table using divs</title>
<style type="text/css">
    .div-table{display:table; border:1px solid #003399;}
    .div-table-caption{display:table-caption; background:#009999;}
    .div-table-row{display:table-row;}
    .div-table-col{display:table-cell; padding: 5px; border: 1px solid #003399;}
</style>
</head>
<body>
<div class="div-table">
    <div class="div-table-caption">This is a caption</div>
    <div class="div-table-row">
    <div class="div-table-col">1st Column</div>
    <div class="div-table-col">2nd Column</div>
</div>
</div>
</body>
</html>

Note : To use these CSS property values, you need to have a web browser which supports them. Unfortunately, that translates to a limited number of web browsers such as IE 8, Firefox 3, Opera 9 and so on

0 讨论(0)