Question

问题已删除。

对不起，找另一个。

Answer 1

这是一个简单的例子。我没有使用任何你的CSS，因为html和那些东西都没有了，但希望这可以让你去：

CSS：

.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;
}

HTML：

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

编辑：

我试图将您的网站复制到我认为您要解释的内容：）。

这是一个快速截图：

请参阅此HTML和CSS以复制上面的图片：）：

<!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>

花些时间查看HTML和CSS，试着弄清楚发生了什么。一旦理解，你永远不会忘记！

Answer 2

请注意，您的doctype也无效，这一点非常重要。尝试使用<!DOCTYPE html>。你的代码也到处都是。你身体外面有html代码。样式标记应该在head标记内，但理想情况下你应该使用样式表。

Answer 3

我刚刚将display: inline;添加到了css

中的＃tekst-sett div id

并根据您的要求为两个输入添加了acontainer。

<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;
}

你的意思是什么？

Answer 4

您可以使用Flex的概念来实现此目的。以下是您期望的小例子

#main{
display:flex;
justify-content:space-around;  
}
#sub1,#sub2{
width:100px;
  height:100px;
  border:1px solid;
  }

<div id="main">
<div id="sub1">
  </div>
<div id="sub2">
  </div>
    </div>

Answer 5

我认为你应该使用花车，也许做一些研究，下次如果你自己解决它会更容易！我推荐你这篇文章，也许它会帮助你进一步的项目： https://css-tricks.com/all-about-floats/

如何将2个div放在一起，显示：inline-box不起作用

5 个答案: