0
У меня возникли проблемы с использованием flex в CSS, чтобы выровнять мои divs так, как хотелось бы им. На диаграмме ниже показано, как я хотел бы все это быть изложеныCSS: Flex Container с 3 divs
Вот все мои CSS и HTML закачано as a fiddle и как фрагмент кода:
@font-face {
\t \t \t font-family: Comfortaa;
\t \t \t src: url("Comfortaa-Light.ttf") format("truetype");
\t \t }
\t \t @font-face {
\t \t \t font-family: Neue;
\t \t \t src: url("HelveticaNeue-Thin.otf") format("opentype");
\t \t }
\t \t body {
\t \t \t position: absolute;
\t \t \t margin: 0px;
\t \t \t top: 0px;
\t \t \t left: 0px;
\t \t \t bottom: 0px;
\t \t \t right: 0px;
\t \t \t overflow-y: scroll;
\t \t \t overflow-x: hidden;
\t \t \t background-color: white;
\t \t }
\t \t #topSegment {
\t \t \t position: relative;
\t \t \t display: flex;
\t \t \t flex-flow: row wrap;
\t \t \t width: 100%;
\t \t \t height: 600px;
\t \t \t top: 0px;
\t \t \t left: 0px;
\t \t \t bottom: 0px;
\t \t \t right: 0px;
\t \t \t background: purple; /* For browsers that do not support gradients */
\t \t \t background: -webkit-linear-gradient(left top, rgba(181,91,184,1), rgba(62,71,130,1)); /* For Safari 5.1 to 6.0 */
\t \t \t background: -o-linear-gradient(bottom right, rgba(181,91,184,1), rgba(62,71,130,1)); /* For Opera 11.1 to 12.0 */
\t \t \t background: -moz-linear-gradient(bottom right, rgba(181,91,184,1), rgba(62,71,130,1)); /* For Firefox 3.6 to 15 */
\t \t \t background: linear-gradient(to bottom right, rgba(181,91,184,1), rgba(62,71,130,1)); /* Standard syntax */
\t \t }
\t \t #frontLogo {
\t \t \t width: 369.9px;
\t \t \t height: 350px;
\t \t \t margin: 125px; \t \t
\t \t }
\t \t #searchBar {
\t \t \t flex: 1;
\t \t \t margin-right: 125px;
\t \t \t margin-left: 0px;
\t \t \t margin-top: 75px;
\t \t \t margin-bottom: 75px;
\t \t \t background-color: rgb(74,74,74);
\t \t \t height: 50px;
\t \t \t border-radius: 25px;
\t \t }
\t \t #weatherInformation {
\t \t \t flex: 1;
\t \t \t margin: 125px;
\t \t \t margin-left: 0px; \t \t
\t \t }
\t \t #weatherInformation p{
\t \t \t margin: 0px;
\t \t \t font-family: 'Open Sans', sans-serif;
\t \t \t font-weight: 300;
\t \t \t color: white;
\t \t \t font-size: 2em;
\t \t }
\t \t #underline {
\t \t \t margin: 0px;
\t \t \t padding: 0px;
\t \t \t width: 0%;
\t \t \t visibility: hidden;
\t \t \t animation-name: expand;
\t \t \t animation-delay: 0.75s;
\t \t \t animation-duration: 0.8s;
\t \t \t animation-timing-function: ease-in-out;
\t \t \t -webkit-animation-fill-mode: forwards; /* Chrome, Safari, Opera */
\t \t \t animation-fill-mode: forwards;
\t \t }
\t \t @keyframes expand {
\t \t \t from {
\t \t \t \t width: 0%;
\t \t \t }
\t \t \t to {
\t \t \t \t width: 100%;
\t \t \t \t visibility: visible;
\t \t \t }
\t \t }
\t \t #gradient {
\t \t \t position: absolute;
\t \t \t width: 100%;
\t \t \t height: 10px;
\t \t \t bottom: 0px;
\t \t \t left: 0px;
\t \t \t background: white; /* For browsers that don't support gradients */
\t \t \t background: -webkit-linear-gradient(top,rgba(0,0,0,0.4),rgba(0,0,0,0)); /*Safari 5.1-6*/
\t \t \t background: -o-linear-gradient(top,rgba(0,0,0,0.4),rgba(0,0,0,0)); /*Opera 11.1-12*/
\t \t \t background: -moz-linear-gradient(top,rgba(0,0,0,0.4),rgba(0,0,0,0)); /*Fx 3.6-15*/
\t \t \t background: linear-gradient(to top, rgba(0,0,0,0.4), rgba(0,0,0,0)); /*Standard*/
\t \t }
\t \t #content {
\t \t \t display: flex;
\t \t \t width: 100%;
\t \t \t height: 900px;
\t \t \t background-color: white;
\t \t }
\t \t /* Custom Scrollbar CSS */
\t \t ::-webkit-scrollbar {
\t \t \t width: 10px;
\t \t }
\t \t ::-webkit-scrollbar-track {
\t \t \t background: rgba(255,255,255,1);
\t \t \t -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
\t \t \t -webkit-border-radius: 50px;
\t \t \t border-radius: 50px;
\t \t }
\t \t ::-webkit-scrollbar-thumb {
\t \t \t -webkit-border-radius: 10px;
\t \t \t border-radius: 10px;
\t \t \t background: rgba(150,150,150,1);
\t \t }
\t \t ::-webkit-scrollbar-thumb:window-inactive {
\t \t \t background: rgba(150,150,150,0.6);
\t \t }<body>
\t <div id="topSegment">
\t \t <a href="index.html">
\t \t \t <img src="Weather%20Icon.svg" alt="CGS Weather Icon" id="frontLogo" >
\t \t </a>
\t \t <div id="searchBar">
\t \t \t <div id="outer">
\t \t \t \t
\t \t \t </div>
\t \t </div>
\t \t <div id="weatherInformation">
\t \t \t <p>CAMBERWELL, MELBOURNE</p>
\t \t \t <hr id="underline">
\t \t \t <p>28°</p>
\t \t </div>
\t \t <div id="gradient"></div>
\t </div>
\t <div id="content"></div>
</body>Я уверен, что у него есть очень простое решение, использующее пару строк, связанных с flex, но я не могу понять, что они собой представляют.
Добро пожаловать в StackOverflow. Пожалуйста, укажите, что именно вы ожидаете увидеть и не увидите. Ваш шаблон и фактический фрагмент выглядят совсем по-другому. Попробуйте также задать конкретный вопрос. С наилучшими пожеланиями. – YakovL
Я не думаю, что вы должны использовать flex для этого вообще. – poepje
Будет несколько изменений разметки, но каков ожидаемый макет, когда строка поиска/информация о воде не соответствует ширине страницы? – LGSon