How can I make a div not larger than its contents?

前端未结

关注

 30  3605

青春惊慌失措

I have a layout similar to:

I would like for the div to only exp

相关标签:

30条回答

不要未来只要你来

2020-11-21 08:05

Try to use width: max-content property to adjust the width of the div by it's content size.

Try this example,

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  width: max-content;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class="ex1">This div element has width 500px;</div>
<br>
<div class="ex2">Width by content size</div>

</body>
</html>

0 讨论(0)

我寻月下人不归

2020-11-21 08:07

The solution is to set your div to display: inline-block.

0 讨论(0)
发布评论:

提交评论
- 加载中...
盖世英雄少女心

2020-11-21 08:07
A CSS2 compatible solution is to use:
```
.my-div
{
    min-width: 100px;
}
```
You can also float your div which will force it as small as possible, but you'll need to use a clearfix if anything inside your div is floating:
```
.my-div
{
    float: left;
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

轮回少年

2020-11-21 08:08

An working demo is here-

.floating-box {
    display:-moz-inline-stack;
    display: inline-block;

    width: fit-content; 
    height: fit-content;

    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21;  
}

<h2>The Way is using inline-block</h2>

Supporting elements are also added in CSS.

<div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
   <div class="floating-box">Floating box</div>
</div>

0 讨论(0)

清酒与你

2020-11-21 08:09

I have solved a similar problem (where I didn't want to use display: inline-block because the item was centered) by adding a span tag inside the div tag, and moving the CSS formatting from the outer div tag to the new inner span tag. Just throwing this out there as another alternative idea if display: inline block isn't a suitable answer for you.

0 讨论(0)
发布评论:

提交评论
- 加载中...

你的背包

2020-11-21 08:09

If you have containers breaking lines, after hours looking for a good CSS solution and finding none, I now use jQuery instead:

$('button').click(function(){

  $('nav ul').each(function(){
    
    $parent = $(this).parent();
    
    $parent.width( $(this).width() );
    
  });
});

nav {
  display: inline-block;
  text-align: left; /* doesn't do anything, unlike some might guess */
}
ul {
  display: inline;
}

/* needed style */
ul {
  padding: 0;
}
body {
  width: 420px;
}

/* just style */
body {
  background: #ffffd;
  margin: 1em auto;
}
button {
  display: block;
}
nav {
  background: #bbb;
  margin: 1rem auto;
  padding: 0.5rem;
}
li {
  display: inline-block;
  width: 40px;
  height: 20px;
  border: solid thin #777;
  margin: 4px;
  background: #999;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>fix</button>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
  </ul>
</nav>

<nav>
  <ul>
    <li>3</li>
    <li>.</li>
    <li>1</li>
    <li>4</li>
    <li>1</li>
    <li>5</li>
    <li>9</li>
    <li>2</li>
    <li>6</li>
    <li>5</li>
    <li>3</li>
    <li>5</li>
  </ul>
</nav>

0 讨论(0)