Выровняйте по основанию с помощью flexbox, имея поплавок на месте - PullRequest
Новая
       21

Выровняйте по основанию с помощью flexbox, имея поплавок на месте

0 голосов
/ 31 мая 2018

У меня есть картинка, заголовок, текст, дата и источник.Я хочу расположить изображение слева, а источник и дату - внизу.если текста слишком много, они перейдут под изображение, и это нормально.но если есть слишком мало.Я хочу, чтобы дата и источник указывали внизу рядом с изображением, например так: 

 -------------------------------
|###########           heading 1|
|########### text text text text|
|########### text text text text|
|###########                    |
|###########                    | 
|###########  source        date|
 --------------------------------

или вот так: 

 -------------------------------
|###########           heading 1|
|########### text text text text|
|########### text text text text|
|########### text text text text|
|########### text text text text| 
|########### text text text text| 
| text text text text text text |
| source                    date|
 --------------------------------

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

Вот моя скрипка :

1 Ответ

0 голосов
/ 01 июня 2018

Существует несколько способов реализации этого макета, и это всего лишь одно из быстрых решений, которое, я думаю, может вам помочь (вы можете изучить Grid и / или Flexbox для других решений макетов).Это урезанная версия того, что вы предоставили, но вы сможете легко вставить недостающий контент в вашу разметку.

В большинстве случаев вам просто нужен раздел об источнике / дате внутри его собственного divчтобы держать его на дне контейнера.

Кроме того, вы должны прочесать вашу разметку.Это немного грязно с некоторыми синтаксическими ошибками.Ваш редактор кода или скрипка должны выделить эти несоответствия.

Надеюсь, это поможет! 

.container {
  border: 1px solid black;
}

.clearfix {
  overflow: auto;
}

.header-link {
  text-decoration: none;
  color: green;
}

.img {
  float: left;
  margin: 20px 20px 10px;
}

.story-text {
  margin: 20px;
  
}

.source-date {
  float: right;
  margin: 20px;
  padding: 10px 20px;
  background: red;
}
<div class="container">
  <div class="clearfix">
    <img class="img" src="http://qnimate.com/wp-content/uploads/2014/03/images2.jpg" alt="Pineapple" width="170" height="170">
    <h3>
      <a class="header-link" href="/news/4/">بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است</a>
    </h3>
    <p class="story-text">بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین  بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این استمتن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این است  بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن ممکن این است بیشترین متن مم این است بیشترین متن ممکن این است بیشترین متن ممکن این است</p>
    <div class="source-date">
      31 مه 2018، ساعت 12:47
    </div>
  </div>
</div>
...