Home>
I'm thinking of making a three-column configuration, but the heights are not aligned.
I'm doing the ul details part of the list in div, but
It does n’t work.
aaaa
aaaaa
<p>aaaaa</p>
<ul>
<li>aaaaa</li>
<li>aaaaa</li>
<li>aaaaa</li>
</ul>
See details
bbbb
bbbbbb
<p>bbbbb</p>
<ul>
<li>bbbbb</li>
<li>bbbbb</li>
<li>bbbbb</li>
</ul>
See details
cccccc
ccccccc
<p>
</p>
<ul>
<li>cccc</li>
<li>cccc</li>
<li>cccc</li>
</ul>
See details
. content-box {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-around;
align-content: space-around;
width: auto;
margin: 5px 0;
padding: 0;
}
.content-item {
display: block;
background-color: #ffffff;
padding: 10px 10px;
border: solid #ffffff;
border-width: 1px;
width: 30%;
height: 100%;
margin: 10px 0px;
border-radius: 24px;
box-shadow: 1px 1px 10px -5px rgba (0.3,0.7,0.4,0.8);
}
.details {
display: block;
text-align: center;
border: solid # 000000;
border-width: 1px;
margin: 0 auto;
}
.mainbox {
display: block;
height: 30%;
width: auto;
}
.image-box {
width: 90%;
height: 50%;
margin: 0 auto;
padding: 5px 0px;
}
-
Answer # 1
-
Answer # 2
Are you looking for something like the following?
. content-box { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; align-content: space-around; width: auto; margin: 5px 0; padding: 0; } .content-item { display: flex;/* fix * / flex-direction: column;/* Add * / background-color: #ffffff; padding: 10px 10px; border: solid #ffffff; border-width: 1px; width: 30%; / * height: 100%;* // * delete * / margin: 10px 0px; border-radius: 24px; box-shadow: 1px 1px 10px -5px rgba (0.3,0.7,0.4,0.8); } .details { display: block; text-align: center; border: solid # 000000; border-width: 1px; margin: 0 auto; width: 90%;/* add * / margin-top: Auto;/* Add * / } .mainbox { display: block; / * height: 30%;* / width: auto; } .image-box { width: 90%; / * height: 50%;* // * delete * / margin: 0 auto; padding: 5px 0px; } .image-item { width: 100%; }
Operation check sample
What you are doing is to specify the height of the parent element (Flex container) by not specifying the height of the child element (Flex item).
After that, I'd probably want to see "details" at the bottom, so set
.content-item
to flex and place it vertically,margin-top : Auto;
has been aligned to the bottom.
Related articles
- html - display flex does not work
- html - [display icon] vertical ⇨ horizontal
- html - i want to display the execution result of the python file on the browser
- html - i want to display an image with background-image
- html - the display of the verification tool and the display of the actual machine are significantly different
- html - i want to fix the display of child elements of flexbox
- about scroll display when overflowing html elements
- html - i want to display the information of the associated model in view
- [beginner] i want to display postgresql data on html using ruby with filtering function
- html - the display px of my pc and the px of the chrome verification tool do not mesh why
- html - i want to erase the line that only the sp display appears at the section break using svg
- html - how to use flex box
- html - i can't display the image with image_tag
- html - i want to display fontawesome fonts before
- i want to display a txt file (contents are html) in an iframe, but it is not in the source state
- html - i want to display the font awesome icon
- html - i want to save the svg image on the site and display it on chrome
- html - i want to break the text entered in the textarea and display it in the view
- html - in ios, the display of writing-mode of the element in the table is broken
- html - i want to display it in the next block without overlapping the blocks
Related questions
- html : How to align the title and description on top (of the slider) and in the center of the slider (without applying height an
- html : Move item down
- html : Art Deco border in CSS
- html : Static not showing on Django site
- javascript : I want to arrange images without HTML and CSS grid
- html : How to remove a translucent dark rectangle via CSS when you tap an element with your finger on mobile devices?
- javascript : How do I split a word into letters if they are in the same div?
- html : how to implement a block?
- javascript : How to connect a custom registration form to the database?
- why is the root HTML page being clipped?
No parent height set. By removing the
height
property to the flex item, I think you can do what the questioner wants to do (operation check link). This time, we are not doing anything because we are out of question, but if you do this, you will need to adjust the height of each element in the flex item. In addition,wrap
is set in theflex-wrap
property, so I will describe it as a precaution, but the height of all elements including the folded elementUse Grid Layoutif you want to align