让我的div水平流动

Question

让我的div水平流动

无论我尝试过什么,我都无法让我的内部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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Seb*_*lli 9

你是这个意思吗？ http://jsfiddle.net/SebastianPataneMasuelli/xtdsv/

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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

那是蜜蜂膝盖! (2认同)

Answer 2

sim*_*aun 5

你应该永远不会有相同ID的页面上的多个元素.

尝试

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

Run Code Online (Sandbox Code Playgroud)然后将您的CSS从#left和#right更改为.left和.right.

div#Mimage需要浮动,否则它会跨越整个宽度并推动其他浮动.

归档时间：	14 年，9 月前
查看次数：	23259 次
最近记录：	9 年，8 月前