Как исправить flex-direction: column Как сделать так, чтобы первые два элемента были направлением строки, а последний столбец
Я пытаюсь создать div, который делает следующее: Слева есть дата. Рядом с ним находится кнопка редактирования. Под этими двумя элементами у меня есть текст. Я не могу получить текст под двумя элементами.
Для этого я использовал flex и разбил каждый элемент на отдельный div. Последние элементы, которые я использовал, flex-direction: column; чтобы убедиться, что он идет под первыми двумя.
Однако безуспешно.
/* _________________________
This is the containers for my_thought page
*/
#blocks {
display: flex;
margin: 10px;
}
#blocks div{
flex: 0 0 100px;
padding: 10px 0;
text-align: center;
}
.one{order: 0;};
.two{order: 1;};
.three{
order: 2;
flex-direction: column;
};
/*________________________ */ <div class = "Thoughts" id = "blocks">
<div class = "one">
<h2>Date:
<?php $date = strtotime($row['date_created']);
echo date('m/d/y', $date);
?>
</h2>
</div>
<div class = "justify-content-center .button .two">
<button type = "submit" name = "submit" class = "btn btn-primary">Edit post</button>
</div>
<div class = "three">
<br>
<p>
<?php echo $row['text']; ?>
</p>
</div>Я прилагаю фотографию, показывающую, как мой код выглядит в настоящее время. Что я делаю неправильно?
Фото выхода вы можете найти по следующей ссылке: https://drive.google.com/file/d/1Q90qE6mWHZtrcXnAXJdUuSUqHtHt31ig/view?usp=sharing
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
1
48
1
Ответы 1
Спасибо вам за помощь. Я смог решить проблему. Я показываю код, который я использовал для решения проблемы.
#blocks {
display: flex;
margin: 10px;
}
#blocks div{
flex: 1 0 100px;
padding: 1px 0;
text-align: center;
}
.one{
order: 0;
margin: 10px;
};
.two{order: 1;
margin: 10px;
}; <div class = "Thoughts">
<div id = "blocks">
<div class = "one">
<h2>Date:
<?php $date = strtotime($row['date_created']);
echo date('m/d/y', $date);
?>
</h2>
</div>
<div class = "justify-content-center .button .two">
<button type = "submit" name = "submit" class = "btn btn-primary">Edit post</button>
</div>
</div>
<p>
<?php echo $row['text']; ?>
</p>
</div>Другие вопросы по теме
Изменение стиля шрифта при сохранении внешней таблицы стилей для панели инструментов plotly
Застрял при создании вложенного выпадающего меню навигации
Интеграция Markdown и SrcSet
Создайте загрузочную форму с несколькими встроенными ярлыками и выберите
Изменение меню вордпресс
Почему URL-адрес фонового изображения CSS не отображает мое изображение, хотя ссылка и пути верны?
Таблица стилей CSS не работает с использованием Ruby on Rails: ошибка Sprockets::Rails::Helper::AssetNotFound
Адаптивное изображение по центру другого адаптивного изображения
Как использовать липкий CSS
Размер фона CSS на нескольких фоновых изображениях
Похожие вопросы
Поместите код сохранения в текстовое поле, а затем измените переменную на этот код сохранения
Застрял при создании вложенного выпадающего меню навигации
Как создать URL-адрес папки, который включает объект файла html?
Интеграция Markdown и SrcSet
Как получить час от datetime-local?
Есть ли способ получить вложенную сортировку в HTML при использовании Jquery-ui
Создайте загрузочную форму с несколькими встроенными ярлыками и выберите
Изменение меню вордпресс
Таблица стилей CSS не работает с использованием Ruby on Rails: ошибка Sprockets::Rails::Helper::AssetNotFound
Адаптивное изображение по центру другого адаптивного изображения
Поделитесь кодом, а не только изображениями, пожалуйста