Не нравятся результаты поиска? Попробуйте другой поиск!
dle-faq.ru FAQ (все вопросы) Общие вопросы по вёрстке помогите пожалуйста как исправить это

помогите пожалуйста как исправить это


     20.03.2014    Общие вопросы по вёрстке    1425

вопрос
помогите пожалуйста как исправить блок фильмов и вид названия фильма
помогите пожалуйста как исправить это


html

<div class="film">
<div class="raiting">7</div>
<div class="who">?</div>
     <a href="{full-link}"><img src="{image-1}" class="posterf" alt=""></a>
     <a href="{full-link}" class="titlev">{title}</a><br>
     <div class="tags">{tags}</div>
      </div>


CSS

html{
    background:url(ly.png);
}
a{
  text-decoration:none;
  color:#010101;
}
.wrapper {
width: 710px;
min-height: 620px;
margin: 0 auto;
padding: 0px 0px 0 0;
position: relative;
background:url(lu.png);
border-radius:5px;
border:3px #CCC solid;
}
.film {
  position:relative;
  background-color:#EFEFEF;
  border:1px solid #CCC;
  min-height:200px;
  width:165px;
  float: left;
  margin: 10px 5px;
  padding: 10px 0;
  overflow: hidden;
}
.posterf{
width:145px;
height:220px;
margin-left:10px;
}
.titlev{
width:2px;
text-align: left;
margin-left:10px;
text-decoration: none;
color:#c5c5c5;
font-size:15px;
}
.tags{
  width:135px;
  margin-left:10px;
  text-align: left;
  font-size:10px;
  color:#010101;
  text-decoration:none;
}
.raiting{
  position:absolute;
  height:15px;
  bottom:60px;
  left:16px;
  background-color:#E57152;
  padding:5px;
  border-radius:2px;
  color:#fff;
  font-size:14px;
  }
.who{
  position:absolute;
  width:20px;
  height:15px;
  bottom:60px;
  right:16px;
  background-color:#4B7FBB;
  padding:5px;
  border-radius:2px;
  color:#fff;
  font-size:13px;
  text-align:center;
}
.bfotter{
margin: 10px auto;
width: 710px;
min-height: 50px;
background:url(lu.png);
border-radius:5px;
border:3px #CCC solid;
}
.counter{
  float:left;
  border:1px solid #ccc;
  width:88px;
  height:30px;
  margin-top:10px;
  margin-left:5px;
}
.design{
  float:right;
  color:#CCC;
  font-size:16px;
  font-family:Arial;
}
.titlefull{
background:#96B4D6;
margin: 10px 5px;
padding:5px;
border-radius:2px;
color:#fff;
font-family:Arial;
}
.playerstyle{
  border:3px solid #CCC;
  height:360px;
  margin: 10px 5px;
}
.posterfull{
  margin:1px 5px;
  border-radius:3px;
}
.posteraiting{
margin:1px 5px 5px;
border:1px solid #CCC;
width:250px;
height:30px;
background:#EFEFEF;
}
.description{
   float:right;
   font-family:Arial;
   font-size:15px;
   width:450px;
}
.titles{
margin:1px 5px 5px;
background:#E57152;
color:#fff;
text-align:left;
width:430px;
padding:5px;
border-radius:3px;
font-family:Arial;
font-size:15px;
}
.titleg{
margin:10px 15px;
}
.titlegv{
  float:right;
}

Ответил: D0Gmatist


прекращайте использовать
  float: left;


вы как дети малые .. увидели класс но так и не поняли что данный класс оптимален для применения в точной ячейке

замените в место данного класса
display: inline-block; /* блок приобретёт свои грани но не будет вытеснять следующий блок в горизонтальном пространстве при условии что у данного блока указана ширина  */
vertical-align: top; /* выравнивание всех блоков в одной полосе бует по верхней рамке */

Комментарии пользователей (5)

BAHO
48

171 | 54

BAHO - 20 марта 2014 23:56 - Юзер

А как вам такой вариант?

BAHO
48

171 | 54

BAHO - 21 марта 2014 00:27 - Юзер

Вот правильная ссылка http://jsfiddle.net/6jLNt/6/

vardanpetrosyan
12

vardanpetrosyan - 21 марта 2014 11:36 - Гости

BAHO,
класс спасибо

D0Gmatist
225

794 | 281

D0Gmatist - 21 марта 2014 12:06 - Местный

Вот так будет правильно размещение блоков в ячейке http://jsfiddle.net/D0Gmatist/bmNq9/
... но ни как не
float: left;

Каждый программист знает - в правильном софте все должно быть прекрасно:
и пользовательский интерфейс, и программные решения, и гениальные ошибки!
Болтовня ничего не стоит. Покажите мне код.

dj-avtosh
39

1479 | 390

dj-avtosh - 21 марта 2014 17:05 - шашлычник

читаешь мои мысли))

skype: elhan.isaev

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

Похожие вопросы