Выровнять элементы P по вертикали в отдельных плавающих элементах div

Question

Выровнять элементы P по вертикали в отдельных плавающих элементах div

0

У меня 3 плавающих divs, все 3 из них имеют два дочерних элемента p с текстами (один с описанием, один с URL-адресом).

Описание может быть любой длины и поэтому должно быть динамическим. Ссылки идут ниже них. Я хотел бы выровнять ссылки вертикально друг с другом, чтобы их "позиция y" была в основном одинаковой. Я не могу добиться этого, как если бы одно из описаний было длиннее (занимает больше строк), чем другие, его ссылка, конечно, ниже, чем ссылки других div. Я не совсем уверен, ясно ли я, но вот код и jsfiddle, должно быть очевидно из этого:

HTML:

<div id="container">
    <div class="floated">
        <p class="desc">This is some description</p>
        <p class="link">This is a link</p>
    </div>
    <div class="floated">
        <p class="desc">This is some description that is really long, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
        <p class="link">This is a link</p>
    </div>
    <div class="floated">
        <p class="desc">This is some description which is just long enough not to fit to one line.</p>
        <p class="link">This is a link that is longer than the other ones and does not fit onto one line</p>
    </div>
</div>

CSS:

#container {
    width: 900px;
    position: relative;
    margin: 0 auto;
    overflow: hidden; /* So all the floated elements have the same height */
}
.floated {
    width: 300px;
    float: left;
    padding-bottom: 500px; /* So all the floated elements have the same height */
    margin-bottom: -500px; /* So all the floated elements have the same height */
}
.desc {
    margin-bottom: 15px;
    text-align: justify;
    -moz-text-align-last: center;
    text-align-last: center;
}

.link {
    color: #e31500;
    text-align: center;
    text-decoration: underline;
    font-size: 12px;
    font-weight: bold;
}

Как видите, все ссылки имеют разные вертикальные позиции. Я бы хотел, чтобы все они имели ту же самую позицию, что и нижняя, в этом случае столбец 2. Возможно ли это даже без изменения HTML? Большое спасибо!

Fygo 06 янв. 2014, в 01:22

Источник

0

Как насчет длинной ссылки?
Roko C. Buljan 05 янв. 2014, в 23:58
0

Длинная ссылка должна вести себя точно так же: ее первая строка должна быть вертикально выровнена с двумя другими ссылками.
Fygo 06 янв. 2014, в 00:01

Теги:

html

css

css-float

alignment

2 ответа

Ещё вопросы

Длинная ссылка должна вести себя точно так же: ее первая строка должна быть вертикально выровнена с двумя другими ссылками.

Green Wizard · Answer 1 · 2014-01-06T04-58-00.000Z

Если вы не хотите менять свою разметку, вы можете добавить следующие строки кода css, что неприемлемо, поскольку содержимое может отличаться.

.desc{
    height:100px;    
}

теперь, если вы хотите изменить свою надбавку

следующая надпись html.

<div id="container">
<div class="floated">
    <p class="desc">This is some description</p>
</div>
<div class="floated">
    <p class="desc">This is some description that is really long, bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>
</div>
<div class="floated">
    <p class="desc">This is some description which is just long enough not to fit to one line.</p>
</div>
<div class="floated links">
    <p class="link">This is a link</p>
</div>
<div class="floated">
    <p class="link">This is a link</p>
</div>
<div class="floated">
    <p class="link">This is a link that is longer than the other ones and does not fit onto one line</p>
</div>

добавьте следующий css вместе с кодом. .links {clear: both; float:left; плыть налево; } }

Roko C. Buljan · Answer 2 · 2014-01-05T21-31-00.000Z

Без изменения вашей разметки HTML... пойдите для нее, используя display:table and display:table-cell

DEMO

#container {
  width: 900px;
  margin: 0 auto;
  overflow: hidden;
  display:table;       /* tada! */
  position:relative;
  background:#eee;
}
.floated {
  position:relative;
  display:table-cell;  /* tada! */
  width: 300px; 
  padding-bottom:45px; /* note this */
  text-align: justify;
  -moz-text-align-last: center;
  text-align-last: center;
  background:#ddd;
}
.desc{ }
.link{
  position:absolute;
  display:block;
  bottom:0px;
  width:33%;           /* this */
  height:45px;         /* and this */
  color: #e31500;
  text-decoration: underline;
  font-size: 12px;
  font-weight: bold;
}

единственное, что вам нужно, - установить высоту для .link иначе вы должны полностью изменить свой HTML, и самый простой способ - использовать структуру table.