彼此对齐div元素

时间：2018-12-04 01:37:25

标签： html css

我试图将3个div彼此对齐，这是因为我使用了垂直对齐。我正在尝试将其修复为@media，当其为480px时，以对齐下面的div。由于某些原因，我无法完成此操作。我花了大约3个小时来尝试执行此操作。任何帮助/建议都将不胜感激。

图片： 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;
}

}

1 个答案:

答案 0 :(得分：0)

只需将它们全部设置为浮动状态：将它们放到一个足够宽的容器中以适合它们，这样其他容器就会被向下推。

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;
}
相关问题
最新问题