Html 如何将2个div相邻放置，显示：内联框不工作_Html_Css

Html 如何将2个div相邻放置，显示：内联框不工作
html css
Html 如何将2个div相邻放置，显示：内联框不工作,html,css,Html,Css,问题已删除。抱歉，请另找一个。我刚刚添加了display:inline到css中的#tekst sett div id 并根据您的要求将一个容器添加到两个输入中 <div id="cont"> <div id="tekst-sett"> Insert text pls </div> <div id="tekst-sett"> Insert text pls </div> </di
问题已删除。
抱歉，请另找一个。
我刚刚添加了
display:inline到css中的#tekst sett div id
并根据您的要求将一个容器添加到两个输入中
<div id="cont">
<div id="tekst-sett">
        Insert text pls
    </div>

<div id="tekst-sett">
        Insert text pls
    </div>
</div>





#tekst-sett {
    padding-left: 3px;
    padding-right: 3px;
    padding-bottom: 3px;
    background-color: #ffffff;
    border-left: 1px solid #c2c2c2;
    border-right: 1px solid #c2c2c2;
    border-bottom: 1px solid #c2c2c2;
    border-radius: 0 0 5px 5px;
    position: relative;
    width: 24%;
    font-size: 15px;
    display: inline;
}


请插入文本
请插入文本
#特克斯特赛特{
左：3倍；
右侧填充：3px；
垫底：3件；
背景色：#ffffff；
左边框：1px实心#C2C2；
右边框：1px实心#C2C2；
边框底部：1px实心#C2C2；
边界半径：0 0 5px 5px；
位置：相对位置；
宽度：24%；
字体大小：15px；
显示：内联；
}

这就是你的意思吗？
我认为你应该使用浮动，也许做一些研究，如果你自己解决它，下次会更容易！
我向您推荐这篇文章，也许它将帮助您进行进一步的项目：
这里有一个简单的例子。我没有使用任何css，因为缺少html和这些东西，但希望这能让您继续：
CSS:
HTML:

第一组
第二组
第三组

编辑：
我试着将你的网站复制到我认为你试图解释的地方：）
下面是一个快速截图：

请查看此HTML和CSS以复制上面的图像：）：

科科斯-奥登·希尔登
身体{
字体系列：“Roboto”，无衬线；
背景：36536B；
}
标题{
背景：#FFFFFF；
颜色：#919191；
填充：15px；
线高：30px；
最大宽度：计算（770px-30px）；
边界半径：3px；
保证金：自动；
}
.集装箱{
最大宽度：770px；
保证金：自动；
边缘顶部：15px；
溢出：隐藏；
}
.左，.右{
浮动：左；
溢出：隐藏；
边界半径：3px；
右边距：10px；
最大宽度：计算（50%-5px）；
}
.对{
右边距：0px；
}
.左页眉，.右页眉{
背景#58C5B3；
字体大小：10px；
填充：15px；
颜色：#FFFFFF；
}
.左文本，.右文本{
背景：#FFFFFF；
填充物：5px；
字体大小：15px；
}
抛弃
左派
一二三四
右翼
一二三四五六七

花点时间看看HTML和CSS，看看到底发生了什么。一旦你明白了，你永远不会忘记
 您可以使用Flex的概念来实现这一点。下面是一个小例子，说明您的期望

#主{
显示器：flex；
证明内容：周围的空间；
}
#sub1#sub2{
宽度：100px；
高度：100px；
边框：1px实心；
}

需要注意的是，您的doctype也是无效的。尝试使用
。你的代码也到处都是。在主体之外有html代码。样式标签应该在head标签内，但理想情况下，您应该使用样式表。
不知道您的代码出了什么问题，因为我无法通过Firebug正确地更改任何内容，但您在\topp\r
div中有一个内部div，它的边距从包含的div中流出，这将导致其他div被放置在它旁边，而不是排队。但是对于容器（绿色/白色），最好创建一个容器div，然后在该div中有两个容器，不要让顶部和底部没有任何东西将它们固定在一起。请查看cssdisplay
属性，更具体地说，查看flex值：。使用内联显示模式不是解决此问题的好方法。内联删除了使用高度、宽度、边距和其他重要CSS属性的功能。改用内联块，或者更好的是，使用float。在这种情况下，float:left@Frederik Moller建议的是最好的情况。谢谢！，但在我的网站上，你可以看到文本所在的位置，是另一个背景。你是怎么做到的？@apility，对不起，我不清楚你在问什么：）。你能帮我翻译一下吗？@apility，请看我编辑过的答案。这就是你想要的吗？@Fredrik Moller，看起来很傻！修正了这个：，但是你如何让盒子留在我的包装纸上呢。包装{max width:800px；margin:0 auto；padding:30px；@apility，你能用它吗？你想达到什么目的？你想让底部的3个盒子伸展吗？解释：）别害怕输入太多，更多的文本可以让我理解。谢谢，你能在里面设置另一个盒子吗？就像我做的一样。标题。
.container {
    position: relative;
    width: 500px;
    background: red;
    overflow: hidden; /*To get your parent to respect the floated divs*/
}

.one, .two, .three {
    position: relative;
    width: 33.33333333333333%; /*Because you only have 3 elements (100 divided by 3)*/
    height: 100px;
    float: left; /*To get them next to each other if all else fails*/
    background: green;
}

<div class="container">
    <div class="one">
        Div One
    </div>
    <div class="two">
        Div Two
    </div>
    <div class="three">
        Div Three
    </div>
</div>

<!DOCTYPE html>
<html>
    <head>
        <title>Cocos - Audun Hilden</title>
        <style>
            body {
                font-family: 'Roboto', sans-serif;
                background: #36536B;
            }

            header {
                background: #FFFFFF;
                color: #919191;
                padding: 15px;
                line-height: 30px;
                max-width: calc(770px - 30px);
                border-radius: 3px;
                margin: auto;
            }

            .container {
                max-width: 770px;
                margin: auto;
                margin-top: 15px;
                overflow: hidden;
            }

            .left, .right {
                float: left;
                overflow: hidden;
                border-radius: 3px;
                margin-right: 10px;
                max-width: calc(50% - 5px);
            }
            .right {
                margin-right: 0px;
            }

            .left-header, .right-header {
                background: #58C5B3;
                font-size: 10px;
                padding: 15px;
                color: #FFFFFF;
            }

            .left-text, .right-text {
                background: #FFFFFF;
                padding: 5px;
                font-size: 15px;
            }
        </style>
    </head>
    <body>
        <header>
            FORSIDEN
        </header>
        <div class="container">
            <div class="left">
                <div class="left-header">
                    BORDER-LEFT
                </div>
                <div class="left-text">
                    One two three four
                </div>
            </div>
            <div class="right">
                <div class="right-header">
                    BORDER-RIGHT
                </div>
                <div class="right-text">
                    One two three four five six seven
                </div>
            </div>
        </div>
    </body>
</html>