Поместите div рядом с другим div

0

У меня есть этот код: http://jsfiddle.net/Ninjacu/t9r9S/4/

Это

<div class="gamedes">
    <img class="miniaturas"src="http://thumbs.mochiads.com/c/g/coaster-racer-3/_thumb_200x200.png">
        <a class="gamede" src="google.es">Hola</a>
        <div class="description">Description about 120 caracters</div><br><br><br><br>
        </div>

        <div class="gamedes">
    <img class="miniaturas"src="http://thumbs.mochiads.com/c/g/coaster-racer-3/_thumb_200x200.png">
        <a class="gamede" src="google.es">Hola</a>
        <div class="description">Description about 120 caracters</div><br><br><br><br>
        </div>

И я хочу поместить второе изображение, заголовок и текст рядом с первым, как в двух столбцах.

Я не понимаю, почему я не могу этого сделать, потому что я пытаюсь использовать все методы, которые я знаю, и это не работает.

Любое решение?

  • 0
    Хотите ли вы, чтобы весь объект находился рядом с изображением, т.е. вы хотите, чтобы поле с именем и описанием все располагалось рядом друг с другом?
  • 0
    Используйте float: left и измените .gamede {} на .gamedes {} : jsfiddle.net/t9r9S/6 (и укажите его ширину.)
Показать ещё 1 комментарий
Теги:

5 ответов

1
Лучший ответ

Вы можете использовать display: inline-block;

скрипка

.gamedes{
    display: inline-block;
}

Кроме того, я немного изменил ваш html

Поделиться
  • 0
    Хорошо, это работает отлично, это лучший ответ во всех ответах, спасибо!
  • 0
    Что я могу изменить в моем HTML?
Показать ещё 3 комментария
1

Вы пробовали плыть в div?

.gamedes {
  float:left
}
Поделиться
  • 0
    Спасибо, но со встроенным блоком это работает лучше, потому что с плавающей точкой: left это поднимает заголовок. Но спасибо!
0

Попробуй это

.miniaturas {
    display: inline-block;
    border-radius: 10px;
}

.description {
    font-size: 15px;
    background-color: #A4A4A4;
    display: inline;
    border-radius: 3px;
    margin-left: 5px;
    width: 10%;
}

.gamede{
    font-size: 20px;
    font-weight: bold;
    margin-left: 5px;
}

.gamedes {
    float:left;
}
Поделиться
0

HTML:

<div class="gamedes">
    <img class="miniaturas"src="http://thumbs.mochiads.com/c/g/coaster-racer-3/_thumb_200x200.png"><br />
        <a href="#" class="gamedes" src="google.es">Hola</a><br />
  <div class="description">Description about 120 caracters</div>
</div>
<div class="gamedes">
    <img class="miniaturas"src="http://thumbs.mochiads.com/c/g/coaster-racer-3/_thumb_200x200.png"><br />
        <a href="#" class="gamedes" src="google.es">Hola</a><br />
  <div class="description">Description about 120 caracters</div>
</div>

CSS:

.gamedes{
   float: left;
   margin-left: 10px;
}
.miniaturas {
    border-radius: 10px;
}

.description {
    font-size: 15px;
    background-color: #A4A4A4;
    border-radius: 3px;
    margin-left: 5px;
}

Результаты здесь: http://jsfiddle.net/2kXFH/

Поделиться
0

Сначала дайте им определенную ширину, и поплавок их останется таким же.

.gamedes{
  width:200px;
  float:left;
}
Поделиться
  • 0
    И исправьте опечатку miniaturas "src, отделите src.
  • 0
    @ va5ja - Отсутствие пробела между атрибутами является грязным, но не связано с ответом.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню