Css “宽度：适合内容；” 属性不好用。父元素有这个属性计算它的宽度小于它的内容

Question

I am working on a clone project and I have encountered a problem at "width:fit-content" concept.我正在开发一个克隆项目，但在“宽度：适合内容”概念上遇到了问题。 First you should look the following image and I am going to give you related html and css codes with image.首先你应该看下面的图片，我会给你相关的 html 和 css 代码和图片。

Parent Element And Childs父元素和子元素

As you see at the image, purple is parent element has 8px padding and "width:fit-content" property.正如您在图像中看到的，紫色是具有 8px 填充和“width:fit-content”属性的父元素。 The parent has span and div elements inside.父级内部有 span 和 div 元素。 Orange one is span element and has 15px width.橙色一个是 span 元素，宽度为 15px。 Red one is div element and has 45.984px width.红色的是 div 元素，宽度为 45.984px。 Pink ones are spans contains texts inside and these are defines width of parents.粉红色的是跨度，其中包含文本，这些是定义父母的宽度。

All these means total width of inside of parent without its padding is 15px(span) +3px(padding-left) +45.984px(div) = 63.984px.所有这些意味着没有填充的父元素内部的总宽度为 15px(span) +3px(padding-left) +45.984px(div) = 63.984px。 The problem is that, despite all these parent has 48.984px width and that causes the div element is wrapped which I dont want to be happened (As I said parent has "width:fit-content;" property).问题是，尽管所有这些父级都有 48.984px 宽度，这会导致 div 元素被包裹，我不想发生这种情况（正如我所说，父级有“width:fit-content;”属性）。 This problem occurs because of next div sibling element of this purple parent element.出现此问题是因为此紫色父元素的下一个 div 兄弟元素。 Next div element only has width:100% property and if I change width property to 200px(this width value must not exceed width of browser viewport), Content of parent element does not wrap and works well.下一个 div 元素只有 width:100% 属性，如果我将 width 属性更改为 200px（此宽度值不得超过浏览器视口的宽度），则父元素的内容不会换行并且效果很好。 Problem can be seen via code below.可以通过下面的代码看到问题。

Html File Includes Problem Html 文件包含问题

Note: Width calculation given above different from example code below because of font styles.注意：上面给出的宽度计算与下面的示例代码不同，因为字体 styles。 I used special font in my original code but the problem still occurs at the example code below.我在原始代码中使用了特殊字体，但问题仍然出现在下面的示例代码中。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *,
        *::after,
        *::before {
            box-sizing: border-box;
        }

        /*header is parent of all elements*/
        header {
            display: flex;
            flex-direction: row;
            background-color: gray;
        }

        /*Parent element which is shown as purple at the example image above*/
        /*Problem occurs at this element*/
        .parent-div {
            padding: 0 8px;
            width: fit-content;
            background-color: purple;
        }

        /*Span element inside parent*/
        .child-span {
            display: inline-block;
            background-image: url("/assets/icons/location.png");/*icon image*/
            width: 15px;
            height: 16px;
            margin-top: 22px;
            background-color: orange;
        }

        .child-div {
            float: right;
            padding-left: 3px;
            margin-top: 15px;
            background-color: red;
        }

        .next-sibling-div {
            width: 100%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <header>

        <div class="parent-div">
            <span class="child-span"></span>
            <div class="child-div">
                <span>Span1</span>
                <span>Span2</span>
            </div>
        </div>
        <div class="next-sibling-div">
        </div>
    </header>
</body>

</html>

How to show up the problem?如何显示问题？

Change width property of next-sibling-div to small pixel sized width or delete the div element has next-sibling-div class.将 next-sibling-div 的 width 属性更改为小像素大小的宽度或删除具有 next-sibling-div class 的 div 元素。 After that, watch changing of div element has parent-div class.After that, You will see red div inside purple will be at the same line with orange span element.之后，观察 div 元素的变化有 parent-div class。之后，你会看到紫色里面的红色 div 将与橙色 span 元素在同一行。

As a conclusion, I want orange span and red div element inside purple parent element at the same line but width of purple parent element has not to be fixed size because its content will be changed at the client side so it may be longer than that fixed size and it has to be same width with its content.作为结论，我希望紫色父元素内的橙色跨度和红色 div 元素在同一行，但紫色父元素的宽度不必固定大小，因为它的内容将在客户端更改，因此它可能比固定的长大小，并且它必须与其内容的宽度相同。 And also next sibling has to have 100% width property because this part will be responsive.并且下一个兄弟必须具有 100% 宽度属性，因为这部分将是响应式的。

Answer 1

I have created this, but maybe its something else and not what you wanted.我已经创建了这个，但也许它是别的东西，而不是你想要的。 Also I dont know how your icon looks like and what exactly will be in span s另外我不知道你的图标是什么样子的，以及span中的具体内容是什么

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *,
        *::after,
        *::before {
            box-sizing: border-box;
        }

        /*header is parent of all elements*/
        header {
            display: flex;
            flex-direction: row;
            background-color: gray;
        }

        /*Parent element which is shown as purple at the example image above*/
        /*Problem occurs at this element*/
        .parent-div {
            padding: 8px;
            background-color: purple;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /*Span element inside parent*/
        .child-span {
            display: inline-block;
            background-image: url("/assets/icons/location.png");/*icon image*/
            width: 15px;
            height: 16px;
            background-color: orange;
        }

        .child-div {
            margin-left: 3px;
            background-color: red;
        }

        .next-sibling-div {
            width: 100%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <header>

        <div class="parent-div">
            <span class="child-span"></span>
            <div class="child-div">
                <span>Span1</span>
                <span>Span2</span>
            </div>
        </div>
        <div class="next-sibling-div">
        </div>
    </header>
</body>

Problem is that you have float:left on child-div .问题是您在child-div上有float:left 。 That causes span s to display in one row, but I dont know exacly why.这导致span s 显示在一行中，但我不知道为什么。 I dont use float anywhere, because flex-box works better for me and for most people I think.我不会在任何地方使用float ，因为flex-box对我和我认为的大多数人来说效果更好。 So, without float:left , each span has its own row.因此，没有float:left ，每个跨度都有自己的行。 Now to display child-span and child-div next to each other, just add display:flex to parent-div .现在要显示child-span和child-div显示，只需将display:flex添加到parent-div即可。 To center child-span and child-div use justify-content:center and align-items:center .要居中child-span和child-div使用justify-content:center和align-items:center 。 Now delete margin-top from childs and change padding-left to margin-left in child-div , because padding makes space inside element and not outside.现在从子元素中删除margin-top并在child-div中将padding-left更改为margin-left ，因为 padding 在元素内部而不是外部产生空间。 And at the end, change padding: 0 8px to padding: 8px on parent-div to make space around childs.最后，在parent-div上将padding: 0 8px更改为padding: 8px以在子元素周围留出空间。

Also I forgotten you can delete content-fit from CSS, because parent-div have width based on inner elements.另外我忘记了你可以从 CSS 中删除content-fit ，因为parent-div的宽度基于内部元素。

Css “宽度：适合内容；” 属性不好用。父元素有这个属性计算它的宽度小于它的内容

问题描述

Parent Element And Childs父元素和子元素

Html File Includes Problem Html 文件包含问题

How to show up the problem?如何显示问题？

1 个解决方案

解决方案1
2 已采纳 2021-03-05 22:20:50

Css “宽度：适合内容；” 属性不好用。 父元素有这个属性计算它的宽度小于它的内容

问题描述

Parent Element And Childs父元素和子元素

Html File Includes Problem Html 文件包含问题

How to show up the problem?如何显示问题？

1 个解决方案

解决方案1 2 已采纳 2021-03-05 22:20:50

Css “宽度：适合内容；” 属性不好用。父元素有这个属性计算它的宽度小于它的内容

解决方案1
2 已采纳 2021-03-05 22:20:50