这是我的网站:http://audunhilden.tk/projects/temp/# , 你可以在左边看到我的文本框，那是 3 个 div。任何人都可以帮助我在同一条线上获得另一个吗？我无法让它工作，如果有人也能编写一个更简单的代码，那就太好了。
无法共享我的 HTML 或 CSS，
由于某些原因无法粘贴我的 CSS，您可以在这里看到它: http://audunhilden.tk/projects/temp/info.css
最佳答案
这是一个简单的例子。我没有使用任何你的 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 以尝试弄清楚发生了什么。一旦了解，您将永远不会忘记!
关于html - 如何将2个div并排放置，显示:inline-box is not working，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40652673/