заставить мои дивы течь горизонтально - PullRequest
Новая
       1

заставить мои дивы течь горизонтально

5 голосов
/ 30 ноября 2010

Независимо от того, что я пробовал, я не могу заставить свои внутренние 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>

Ответы [ 3 ]

9 голосов
/ 30 ноября 2010

это ты о чем? 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>

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; 
}
5 голосов
/ 30 ноября 2010

Вы должны никогда иметь более одного элемента на странице с одинаковым идентификатором.

Попробуйте 

<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>
, а затем измените свой CSS с #left и #right на .left и .right.

div # Mimage нужно плавать, иначе он охватит всю ширину и оттолкнет другие поплавки вниз.

2 голосов
/ 30 ноября 2010

Похоже, что у вас есть ваши классы и ID перепутаны. Вы повторно используете левый и правый идентификаторы. Вы, вероятно, хотите, чтобы плавающее изображение на Mimage также отображалось горизонтально.

Я немного изменил ваш код, так должен выглядеть результат?

http://jsfiddle.net/WcEAb/1/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...