Html 让我的 div 水平流动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4308523/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
getting my divs to flow horizontally
提问by E.E.33
Regardless of what I've tried, I cannot get my inner divs to flow horizonatally within the outer div. Please help!!!
无论我尝试过什么，我都无法让我的内部 div 在外部 div 内水平流动。请帮忙！！！
<style type="text/css">
#gallery {
width: 688px;
height: 360px;
border: solid;
}
#galleryelements {
width: 650px;
height: 320px;
display:inline;
background-color:#0FF;
}
.s-thumbnail {
width: 50px;
height: 75px;
border: solid;
}
.thumbnail {
width: 100px;
height: 150px;
border: solid;
}
#left {
float:left;
}
#right {
float:right;
}
#Mimage {
width: 200px;
height: 300px;
border: solid;
}
</style>
<body>
<div id="gallery">
<div id="galleryelements">
<div class="s-thumbnail" id="left"></div>
<div class="thumbnail" id="left"></div>
<div id="Mimage"></div>
<div class="thumbnail" id="right"></div>
<div class="s-thumbnail" id="right"></div>
</div>
</div>
</body>
</html>
回答by Sebastian Patane Masuelli
is this what you mean? http://jsfiddle.net/SebastianPataneMasuelli/xtdsv/
你是这个意思吗？ http://jsfiddle.net/SebastianPataneMasuelli/xtdsv/
HTML:
HTML：
<div id="gallery">
<div id="galleryelements">
<div class="s-thumbnail left" id=""></div>
<div class="thumbnail left" id="left"></div>
<div id="Mimage"></div>
<div class="thumbnail right" id=""></div>
<div class="s-thumbnail right" id=""></div>
</div>
</div>
CSS:
CSS：
#gallery {
width: 688px;
height: 360px;
border: 1px solid red;
}
#galleryelements {
width: 650px;
height: 320px;
background-color:#0FF;
display: block;
}
.s-thumbnail {
width: 50px;
height: 75px;
border: solid;
}
.thumbnail {
width: 100px;
height: 150px;
border: solid;
}
.left {
float:left;
}
.right {
float:left;
}
#Mimage {
width: 200px;
height: 300px;
border: 1px solid green;
float: left;
}
回答by simshaun
You should neverhave more than one element on the page with the same ID.
页面上永远不应有多个具有相同 ID 的元素。
Try
尝试
<div class="s-thumbnail left"></div>
<div class="thumbnail left"></div>
<div id="Mimage"></div>
<div class="thumbnail right"></div>
<div class="s-thumbnail right"></div>div#Mimage needs to be floated, else it will span the entire width and push the other floats down.
div#Mimage 需要浮动，否则它将跨越整个宽度并将其他浮动向下推。
回答by Gazler
It would appear that you have your classes and id's mixed up. You are re-using the left and right ids. You probably want a float on Mimage too to make it display horizontally.
看起来您的课程和 id 混淆了。您正在重复使用左右 ID。您可能也希望在 Mimage 上浮动以使其水平显示。
I changed your code slightly, is this what the result should look like?
我稍微更改了您的代码，结果应该是这样吗？
