html - Aligning div elements under each other
问题描述
I am trying to align 3 divs under each other, I believe it is because of the vertical-align I used. I am trying to fix it up for the @media, when its at 480px to align the divs underneath. For some reason I am unable to accomplish this. I have spent about 3 hours trying to do this. Any help/suggestions is much appreciated.
Image:
HTML:
<div class="features">
<div id="features-title">
<p>Features fitted just for your website</p>
<hr>
</div>
<div class="features-body">
<div id="features-body-pages">
<div id="features-body-pages-title">
<p>Your Site</p>
</div>
<div id="features-body-pages-subtitle">
<p>User accessibility.</p>
</div>
<hr>
<div id="features-body-pages-main">
<p>From navigation to user accessibility, we make your website easy for your visitors to navigate around. You don't want your visitors leaving, and neither do we! That's why we make your site appealing.</p>
</div>
</div>
<div id="features-body-support">
<div id="features-body-support-title">
<p>24/7 Support</p>
</div>
<div id="features-body-support-subtitle">
<p>Never hesitate.</p>
</div>
<hr>
<div id="features-body-support-main">
<p>Unlike most places, we actually offer 24/7 support with minimum wait time. Even after your website has been delivered, it's not to late to ask for help. We are always here and glade to help.</p>
</div>
</div>
<div id="features-body-types">
<div id="features-body-types-title">
<p>Types of websites</p>
</div>
<div id="features-body-types-subtitle">
<p>Request any kind of site.</p>
</div>
<hr>
<div id="features-body-types-main">
<p>You name it, we make it! From small personal sites to large company sites. All you need to do is provide us with the website information, and we will do the rest.
</div>
</div>
</div>
</div>
CSS:
body {
margin: 0;
background-image: url("../images/CrystalDevLogo.png");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #4484CE;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
ul.topnav li a:hover:not(.active) {background-color: #3a88e3;}
ul.topnav li a.active {background-color: #D9D9D9;}
ul.topnav li.right {float: right;}
@media screen and (max-width: 600px){
ul.topnav li.right,
ul.topnav li {float: none;}
}
.cover-image {
width: 100%;
height: auto;
position: absolute;
z-index: -1;
}
.cover-image img {
width: 100%;
height: auto;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: -1;
}
#alert-motd {
text-align: center;
overflow: hidden;
position: relative;
height: 50px;
}
#alert-motd p {
font-size: 18px;
position: absolute;
width: 100%;
height: 100%;
margin: 0;
text-align: center;
/* Starting position */
-moz-transform:translateX(100%);
-webkit-transform:translateX(100%);
transform:translateX(100%);
/* Apply animation to this element */
-moz-animation: scroll-left 25s linear infinite;
-webkit-animation: scroll-left 25s linear infinite;
animation: scroll-left 25s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
0% { -moz-transform: translateX(100%); }
100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
0% { -webkit-transform: translateX(100%); }
100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
0% {
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
100% {
-moz-transform: translateX(-100%); /* Browser bug fix */
-webkit-transform: translateX(-100%); /* Browser bug fix */
transform: translateX(-100%);
}
}
@media all and (max-width: 1690px) {
.body-quote {
float: left;
margin-left: 10px;
margin-top: 10px;
width: 280px;
height: auto;
background-image: linear-gradient(#17A3DC, #157DA8);
border-radius: 15px;
box-shadow:
0px 2px 2px 5px #555,
0px 4px 4px 5px #555,
0px 6px 6px 5px #555,
0px 8px 8px 5px #555;
}
.body-quote-title {
text-align: left;
font-size: 30px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-quote-subtitle {
text-align: left;
font-size: 16px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-quote-body {
height: auto;
width: auto;
text-align: center;
padding-bottom: 8px;
}
.body-quote-body #free-quote {
border-radius: 15px;
background-color: #24BF39;
}
.body-quote-body #schedule-appointment {
border-radius: 15px;
background-color: #24BF39;
}
.body-help {
float: right;
margin-right: 10px;
margin-top: 10px;
width: 280px;
height: auto;
background-image: linear-gradient(#17A3DC, #157DA8);
border-radius: 15px;
box-shadow:
0px 2px 2px 5px #555,
0px 4px 4px 5px #555,
0px 6px 6px 5px #555,
0px 8px 8px 5px #555;
}
.body-help-title {
text-align: left;
font-size: 30px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-help-subtitle {
text-align: left;
font-size: 16px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-help-body {
height: auto;
width: auto;
text-align: center;
padding: 0px 8px 0px 8px;
color: white;
}
.body-help-body p {
padding: 8px 8px 0px 8px;
}
.body-help-body #help-contact {
border-radius: 15px;
background-color: #24BF39;
}
.features {
margin: 0 auto;
width: 90%;
text-align: center;
background-color: rgba(193, 196, 195, .6);
margin-top: 500px;
border-radius: 15px;
}
.features-body {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0px 15px 15px;
}
.features #features-title {
font-size: 50px;
font-style: bold;
background-color: rgba(75, 180, 44, .6);
border-radius: 15px;
color: black;
}
.features #features-body-pages {
background-color: #F65555;
border-radius: 5px;
width: 200px;
height: auto;
}
.features #features-body-pages-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.features #features-body-pages-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-pages hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-support {
background-color: #F65555;
border-radius: 5px;
width: 200px;
height: auto;
}
.features #features-body-support-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.features #features-body-support-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-support hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-support-main {
padding: 10px 10px 10px 10px;
}
.features #features-body-types {
background-color: #F65555;
border-radius: 5px;
width: 200px;
height: auto;
}
.features #features-body-types-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.features #features-body-types-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-types hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-types-main {
padding: 10px 10px 10px 10px;
}
.contact {
background-color: rgba(193, 196, 195, .6);
border-radius: 15px;
text-align: center;
margin-top: 200px !important;
width: 90%;
margin: 0 auto;
}
.contact #contact-header {
border-radius: 10px;
background-color: rgba(80, 140, 205, .9);
width: 90%;
margin: 0 auto;
color: black;
}
.contact #contact-title {
font-size: 50px;
font-style: bold;
text-align: center;
}
.contact #contact-subtitle {
font-size: 22px;
font-style: bold;
}
.contact #contact-info-email {
font-size: 20px;
font-style: bold;
}
.contact #contact-info-phone {
font-size: 20px;
font-style: italic;
font-style: bold;
}
.contact-form {
width: 600px;
margin: 0 auto;
}
}
@media all and (max-width: 1280px) {
.body-quote {
float: left;
margin-left: 10px;
margin-top: 10px;
width: 280px;
height: auto;
background-image: linear-gradient(#17A3DC, #157DA8);
border-radius: 15px;
box-shadow:
0px 2px 2px 5px #555,
0px 4px 4px 5px #555,
0px 6px 6px 5px #555,
0px 8px 8px 5px #555;
}
.body-quote-title {
text-align: left;
font-size: 30px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-quote-subtitle {
text-align: left;
font-size: 16px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-quote-body {
height: auto;
width: auto;
text-align: center;
padding-bottom: 8px;
}
.body-quote-body #free-quote {
border-radius: 15px;
background-color: #24BF39;
}
.body-quote-body #schedule-appointment {
border-radius: 15px;
background-color: #24BF39;
}
.body-help {
float: right;
margin-right: 10px;
margin-top: 10px;
width: 280px;
height: auto;
background-image: linear-gradient(#17A3DC, #157DA8);
border-radius: 15px;
box-shadow:
0px 2px 2px 5px #555,
0px 4px 4px 5px #555,
0px 6px 6px 5px #555,
0px 8px 8px 5px #555;
}
.body-help-title {
text-align: left;
font-size: 30px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-help-subtitle {
text-align: left;
font-size: 16px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-help-body {
height: auto;
width: auto;
text-align: center;
padding: 0px 8px 0px 8px;
color: white;
}
.body-help-body p {
padding: 8px 8px 0px 8px;
}
.body-help-body #help-contact {
border-radius: 15px;
background-color: #24BF39;
}
.features {
margin: 0 auto;
width: 90%;
text-align: center;
background-color: rgba(193, 196, 195, .6);
margin-top: 500px;
border-radius: 15px;
}
.features-body {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 0px 15px 15px;
}
.features #features-title {
font-size: 50px;
font-style: bold;
background-color: rgba(75, 180, 44, .6);
border-radius: 15px;
color: black;
}
.features #features-body-pages {
background-color: #F65555;
border-radius: 5px;
width: 200px;
height: auto;
}
.features #features-body-pages-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.features #features-body-pages-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-pages hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-support {
background-color: #F65555;
border-radius: 5px;
width: 200px;
height: auto;
}
.features #features-body-support-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.features #features-body-support-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-support hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-support-main {
padding: 10px 10px 10px 10px;
}
.features #features-body-types {
background-color: #F65555;
border-radius: 5px;
width: 200px;
height: auto;
}
.features #features-body-types-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
display: table-cell;
vertical-align: middle;
}
.features #features-body-types-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-types hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-types-main {
padding: 10px 10px 10px 10px;
}
}
@media all and (max-width: 980px) {
}
@media all and (max-width: 736px) {
.body-quote, .body-help { float: none; margin:auto;}
.features #features-body-types, .features #features-body-support, .features #features-body-pages {
display: inline;
margin: auto;
}
}
@media all and (max-width: 480px) {
.body-quote {
margin: 0 auto;
width: 280px;
background-image: linear-gradient(#17A3DC, #157DA8);
border-radius: 15px;
box-shadow:
0px 2px 2px 5px #555,
0px 4px 4px 5px #555,
0px 6px 6px 5px #555,
0px 8px 8px 5px #555;
}
.body-quote-title {
text-align: left;
font-size: 30px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-quote-subtitle {
text-align: left;
font-size: 16px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-quote-body {
height: auto;
width: auto;
text-align: center;
padding-bottom: 8px;
}
.body-quote-body #free-quote {
border-radius: 15px;
background-color: #24BF39;
}
.body-quote-body #schedule-appointment {
border-radius: 15px;
background-color: #24BF39;
}
.body-help {
left: 0;
right: 0;
margin: 0 auto;
width: 280px;
height: auto;
background-image: linear-gradient(#17A3DC, #157DA8);
border-radius: 15px;
box-shadow:
0px 2px 2px 5px #555,
0px 4px 4px 5px #555,
0px 6px 6px 5px #555,
0px 8px 8px 5px #555;
}
.body-help-title {
text-align: left;
font-size: 30px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-help-subtitle {
text-align: left;
font-size: 16px;
width: auto;
height: auto;
color: white;
padding: 0px 8px 0px 8px;
}
.body-help-body {
height: auto;
width: auto;
text-align: center;
padding: 0px 8px 0px 8px;
color: white;
}
.body-help-body p {
padding: 8px 8px 0px 8px;
}
.body-help-body #help-contact {
border-radius: 15px;
background-color: #24BF39;
}
.features {
text-align: center;
width: 90%;
text-align: center;
background-color: rgba(193, 196, 195, .6);
margin-top: 500px;
border-radius: 15px;
height: auto;
}
.features-body {
padding: 0px 15px 15px;
}
.features #features-title {
font-size: 50px;
font-style: bold;
background-color: rgba(75, 180, 44, .6);
border-radius: 15px;
color: black;
}
.features #features-body-pages {
background-color: #F65555;
border-radius: 5px;
width: auto;
height: auto;
float: left;
}
.features #features-body-pages-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
}
.features #features-body-pages-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-pages hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-pages-main {
padding: 10px 10px 10px 10px;
}
.features #features-body-support {
background-color: #F65555;
border-radius: 5px;
width: auto;
height: auto;
float: left;
}
.features #features-body-support-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
}
.features #features-body-support-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-support hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-support-main {
padding: 10px 10px 10px 10px;
}
.features #features-body-types {
background-color: #F65555;
border-radius: 5px;
width: auto;
height: auto;
float: left;
}
.features #features-body-types-title {
background-color: rgb(77, 202, 40);
border-radius: 5px;
width: 200px;
height: auto;
color: white;
font-size: 26px;
}
.features #features-body-types-subtitle {
width: auto;
height: auto;
font-size: 20px;
}
.features #features-body-types hr {
border: none;
height: 2px;
color: #333;
background-color: #333;
width: 90%;
}
.features #features-body-types-main {
padding: 10px 10px 10px 10px;
}
.contact {
background-color: rgba(193, 196, 195, .6);
border-radius: 15px;
text-align: center;
margin-top: 200px !important;
width: 90%;
margin: 0 auto;
}
.contact #contact-header {
border-radius: 10px;
background-color: rgba(80, 140, 205, .9);
width: 90%;
margin: 0 auto;
color: black;
}
.contact #contact-title {
font-size: 50px;
font-style: bold;
text-align: center;
}
.contact #contact-subtitle {
font-size: 22px;
font-style: bold;
}
.contact #contact-info-email {
font-size: 20px;
font-style: bold;
}
.contact #contact-info-phone {
font-size: 20px;
font-style: italic;
font-style: bold;
}
.contact-form {
width: auto;
margin: 0 auto;
}
}
解决方案
只需将它们全部设置为浮动：将它们放在一个足够宽的容器中以适合它们，这样其他的就会被推下。
div id="myDIV">
<div>content 1</div>
<div>content 2</div>
<div>content 3</div>
<div>content 4</div>
</div>
CSS：
#myDIV{
width: 800px;
}
#myDIV div {
float: left;
height: 400px;
width: 400px;
}
推荐阅读
- python - 从非连续视频帧创建全景图
- python - for 循环中的返回函数仅返回 1 项
- linux - 如何将目录及其子目录中的所有 PDF 文件复制到一个位置？
- macos - 在 Mac 上安装 ffmpeg 失败
- c++ - 我们如何在 C++ 中的无序映射中分配变量并更新它们？
- javascript - 为什么 JavaScript 没有检测到所有 cookie？
- java - 如何使用 Apache Tomcat 服务器在 VScode IDE 中设置 servlet 和 jsp 项目？
- javascript - 如何在方法单击时更新 sessionStorage 中的值？
- javascript - 如何在 String 对象的原型上实现这个测试？
- bash - bash脚本中的列表积累