0

由于某些原因

div 的宽度为 100%，如果我将其设置为自动，则没有任何变化。试过了display: block;，还是一无所获。

我有什么 index.html

.box {
  border: 1px solid #555;
  display: block;
  width: auto;
}
<head>
  <title>project x</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <div class='box'>This is a box</div>
  <div class='box'>This is another box</div>
</body>

我喜欢破解问题，但这个破解了我。

编辑

我希望 div 采用单词的宽度。我不希望它是 100%。

4

7 回答 7

3

现在添加到 Explosion Pills 答案中，它清楚你想要什么，这个 css 应该可以工作。

.box {
    border: 1px solid #555; 
    display: inline-block;        
    float:left;
    clear:both;
}

或者，您可以在每个块<br>之后放置一些标签<div>

于 2013-07-05T17:20:32.477 回答
1

Width display: block，元素将始终使用尽可能多的宽度。好像你想使用display: inline-block

http://jsfiddle.net/HpMSU/

于 2013-07-05T17:16:37.007 回答
1

width:auto在 DIV 上扩展它以填充它的父级，而不是由它的子级调整大小。

例如：http: //jsfiddle.net/nTWvr/

根据内容调整 DIV 的大小，有以下几种方法：如何使 div 不大于其内容？

于 2013-07-05T17:28:24.300 回答
1

以下选项可以将width: auto使用可用容器宽度的行为更改为所谓的收缩适应算法：

  1. 浮动：左/右
  2. 职位：绝对
  3. 显示：inline-block
  4. 显示：inline-table
  5. 显示：表格
  6. 显示：表格单元格

假设您需要将块保留在正常流程的块格式化上下文中（即像往常一样垂直地一个接一个地移动，只是具有其内容的宽度），我想在这种情况下 display: table 将是最好的解决方案。

于 2013-07-05T17:56:19.433 回答
0

设置与设置width:auto;几乎相同width:100%;（唯一真正的区别是它们处理边距和填充的方式不同）。

此外，div对象默认是块元素，因此设置display:block;不会改变它们的行为。

你说你希望 div 占据单词的宽度。要做到这一点，您可以设置display:table-cell（这对 IE 不太友好），或者您可以浮动 div，它会捕捉以适应里面的内容。

.box { float:left; }

确保在 div 之后正确清除浮动，以避免破坏其下方内容的布局。

.clear { clear:both; height:0px; } 

<div class="clear"></div>
于 2013-07-05T17:20:24.060 回答
0

利用display: inline-block

并添加一个类

.clear { clear:both;}

把它放在盒子之间

所以

http://jsfiddle.net/HpMSU/1/

于 2013-07-05T17:25:09.623 回答
-1

我想你想要这个结果：

<head>
    <title>project x</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <span class='box'>This is a box</span>
    <span class='box'>This is another box</span>
</body>

.box {
    border: 1px solid #555; 
}

div我刚改成span！尝试使用正确的 HTML 标签！

于 2013-07-05T17:35:01.233 回答