Question

我正在寻找一种基于所附内容设置div宽度的方法，而不是继承父级的宽度，例如：

<div id="parent" style="width:100px">
     <div id="child"> <!-- i want to add css to this div -->

         <p style="width:200px;"> this s atext</p>
        <img src="this s an image" style="width:300px;">


     </div>  
</div>

我想要自动设置#child 500px的宽度，我不想手动设置#child的宽度，因为在我的实际情况下我不知道它的宽度是什么，（查看下面的评论，了解有关我案例的更多详情）

请注意，以下所有解决方案都不适用于我：

display:inline;
width:auto;
overflow:visible;

你能帮帮我吗？

Answer 1

这是一种可以适用于您的布局的方法。

如果 HTML 如下所示：

<div id="parent" style="width:100px">
    <div id="child"> <!-- i want to add css to this div -->
        <p style="width:200px;">this is text</p>
        <img src="http://placekitten.com/600/400" style="width:300px;">
    </div>
</div>

应用以下 CSS ：

#parent {
    border: 1px dashed blue;
}
#child {
    background-color: beige;
    white-space: nowrap;
}
#child p {
    border: 1px dotted blue;
    display: inline-block;
    vertical-align: top;
    margin: 0;
}
#child img {
    border: 1px dotted blue;
    vertical-align: top;
}

边框仅用于说明各种方框的边缘。

看起来您希望两个子元素p和img位于一行上，因此总宽度为500px（200px + 300px）。

首先，将display: inline-block应用于p，以便它可以与...一起内联图像。

要将p和img保持在一行，您可以将white-space: nowrap应用于 #child包含块。

或者，您可以确保两个元素之间没有空格（例如，换行符），但如果内容来自某个元素，这可能不可行 CMS或其他一些饲料。

请注意，#child元素采用#parent块的宽度，并且后代元素相应溢出。这可能不太理想，但可以修复如果需要的话。

您可能需要将最大宽度设置为#child，具体取决于您的实际内容。

请参阅演示：http://jsfiddle.net/audetwebdesign/c94Ya/

在Firefox中，结果如下：

enter image description here

Answer 2

可以为子div设置宽度500px。但它不占宽度，因为父容器宽度为100px。

如果你想为子div设置500px意味着重新更改父div 500px或500px以上的样式，那时只有子div可以工作。

例如

<div id="parent" style="width:100%">
     <div id="child" style="width:500px"> <!-- i want to add css to this div -->

         <p style="width:200px;"> this s atext</p>
        <img src="this s an image" style="width:300px;">


     </div>  
</div>

在此示例中，我将父css宽度100px更改为100％

Answer 3

尝试使用css中的z-index将ID分开。它用于将对象放在彼此之上而不受彼此影响css

#child {
width: 500px;
z-index: 100;
}

从这里开始，任何高于z-index的ID都将高于子ID。并且z-index低于100的任何ID都将位于子ID之下。

Answer 4

当我尝试这个时，红色边框比黑色边框宽

<div id="parent" style="width:100px;border: 1px solid black">
     <div id="child" style="width:500px;border: 1px solid red"> <!-- i want to add css to this div -->
         <p style="width:200px;"> this s atext</p>
     </div>
</div>

Answer 5

这是你在找什么？

<强> http://jsfiddle.net/A9xDG/

<div id="parent" style="width:200px; background: red; height: 400px">
     <div id="child" style="background: yellow; width: 500px;">
        <p> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, </p>
         <img src="this s an image" style="width:100px" />
      </div> 
</div>

更新：http://jsfiddle.net/A9xDG/3/

如何在忽略父级宽度时相对于内容设置div宽度

5 个答案: