我正在尝试使蓝色按钮始终保持对齐。根据屏幕的大小和文本移动到多行，这将导致按钮不对齐。我可以获取有关如何保持这些状态的帮助吗？ http://marketing.geneia.com/himss2019/
@charset "utf-8";
/* CSS Document */
/* --------Resets-------- */
*{
margin:0;
padding:0;
border:0;
}
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
display: block;
}
body {
font-family: Averta-Regular, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
margin: 0 0 25px 0;
padding: 0;
font-family: Averta-Regular, sans-serif;
}
/* --------Styles-------- */
h1 {
font-size: 36px;
font-family: Averta-Extrabold, sans-serif;
font-weight: normal;
font-style: normal;
}
h2 {
font-size: 28px;
color: #125687;
font-family: Averta-Extrabold, sans-serif;
}
h2.smaller-blue {
font-size: 24px;
}
h3 {
font-size: 18px;
font-family: Averta-Semibold, sans-serif;
font-weight: normal;
line-height: 28px;
}
p, li {
color: #00354e;
font-size: 17px;
line-height: 30px;
}
ul {
list-style: none;
margin-bottom: 1.5rem;
}
li {
padding-left: 30px;
}
li:before {
content: "";
border-color: transparent #00aecb;
border-style: solid;
border-width: 0.35em 0 0.35em 0.45em;
display: block;
height: 0;
width: 0;
left: -1.2em;
top: 1.1em;
position: relative;
}
a {
position: relative;
display: inline-block;
transition: .3s;
text-decoration: none;
color: #00aecb;
}
a::after {
position: absolute;
bottom: .3em;
left: 0;
content: '';
width: 100%;
height: 1px;
background-color: #00adca;
opacity: 0;
transition: .3s;
}
a:hover::after {
bottom: 0;
opacity: 1;
color: #00adca;
}
a:hover {
color: #00adca;
text-decoration: none;
cursor: pointer;
}
b, strong, .bold {
font-weight: 700;
}
hr {
margin: 20px 0;
width: 100%;
border-top: 1px solid #cacfde;
}
.uppercase {
text-transform: uppercase;
}
.container, .container-fluid {
margin-right: auto;
margin-left: auto;
padding-left: 25px;
padding-right: 25px;
max-width: 1366px;
}
.uppercase {
text-transform: uppercase;
}
.vert-middle {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.green {
color: #a3d869;
}
.teal {
color: #00aecb;
}
.drk-blue {
color: #125687;
}
section.background-grey {
background: #eeeff2;
padding: 60px 20px;
}
section.background-white {
background: #fff;
padding: 60px 20px;
}
.center {
margin: 0 auto;
text-align: center;
}
.img-responsive {
display: block;
max-width: 100%;
height: auto;
}
.btn {
background-color: #4CAF50; /* Green */
border: none;
border-radius: 4px;
color: white;
font-family: Averta-Semibold;
font-weight: normal;
padding: 18px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
a.btn:hover {
background-color: #42cfe6;
color: #fff;
}
a.btn::after {
display: none;
}
.btn-teal {
background-color: #00AECB;
}
a.btn.btn-teal:hover {
background-color: #42cfe6;
}
.btn-drkblue {
background-color: #0f5687;
}
a.btn.btn-drkblue:hover {
background-color: #0d3a5b;
}
a.anchor-link {
display: block;
}
a.anchor-link::after {
display: none;
}
a.link-image::after {
display: none;
}
/* --------Header/Top Nav-------- */
header {
background-color: #fff;
height: 100px;
width: 100%;
}
.logo {
padding: 15px 0;
}
nav {
padding: 40px 0;
float: right;
}
nav ul {
list-style-type: none;
text-align: right;
float: right;
margin: 0;
padding: 0;
}
nav li {
display: inline;
padding: 2px;
color: #005d91;
font-size: 16px;
}
nav li:before {
display: none;
}
nav a:hover {
color: #00aecb;
}
/* --------Hero-------- */
.hero {
position: relative;
padding: 125px 0 125px 0;
background: url(img/lp-hero-1.jpg) no-repeat;
background-size:cover;
background-position: center 20%;
color: #fff;
}
.hero.subscribe {
position: relative;
padding: 125px 0 125px 0;
background: url(img/lp-hero-2.jpg) no-repeat;
background-size:cover;
background-position: center 20%;
color: #fff;
}
.hero.sessions {
position: relative;
padding: 125px 0 125px 0;
background: url(img/lp-hero-3.jpg) no-repeat;
background-size:cover;
background-position: center 20%;
color: #fff;
}
.hero h1 {
font-size: 48px;
margin-top: 10px;
}
.mobile h1 {
color: #125687;
font-weight: 400;
font-size: 28px;
}
.mobile p {
font-size: 14px;
line-height: 24px;
}
.subtitle {
font-size: 18px;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 10px;
letter-spacing: .1em;
color: #fff;
background: #73ca14;
padding: 10px 15px;
display: inline-block;
}
.hero-text p {
color: #fff;
}
.hero-text h3 {
/*color: #a3d06a;*/
}
/* --------Main Content-------- */
.main-content--text {
padding-right: 40px;
width: 60%;
}
img.pdf-thumb {
width: 225px;
margin: -30px 0 0 0;
-ms-transform: rotate(6deg);
-webkit-transform: rotate(6deg);
transform: rotate(6deg);
}
p.intro-text {
font-size: 22px;
line-height: 30px;
color: #125687;
}
.cta-callout {
background: rgba(255, 255, 255, 0.7); /* White background with 70% opacity */
padding: 25px;
margin: 0 0 20px 0;
}
.cta-callout p{
margin-bottom: 0;
}
p.subhead {
margin: 30px 0 5px 0;
color: #125687;
}
.col-lg-7.main-text {padding: 0 10px 0 50px;}
/* --------Form-------- */
form {
margin-top: 25px;
padding: 0 30px 30px;
}
input[type=text], select {
width: 100%;
padding: 8px;
margin: 0 0 10px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 15px;
}
input[type=submit] {
background-color: #00aecb;
color: white;
padding: 14px 40px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
-webkit-transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
transition: background-color .5s ease-out;
}
input[type=submit]:hover {
background-color: #125687;
}
label {
color: #5e5f60;
margin-bottom: 0;
font-size: 14px;
font-weight: 700;
}
.download-form {
background: #fff;
padding: 0;
}
.download-form h3 {
color: #fff;
font-size: 20px;
font-weight: 500;
}
.form-header {
background: #125687;
padding: 30px 20px;
text-align: center;
}
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}
/* --------Value Prop Content-------- */
.valueprop {
padding: 10px 30px;
}
.valueprop:nth-child(n+2) {
border-left: 1px solid #ebebeb;
}
.valueprop p {
text-align: center;
font-size: 15px;
line-height: 25px;
}
.valueprop h3 {
color: #00aecb;
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 1.5em;
}
.valueprop-content h2 {
margin-bottom: 50px;
}
section.background-white.valueprop-content {
padding: 60px 20px;
}
section.background-white.valueprop-content h3 {
color: #00aecb;
text-transform: uppercase;
margin-bottom: 20px;
margin-top: 1.5em;
font-family: Averta-Bold, sans-serif;
}
.verticalLine {
border-left: 1px solid red;
}
/* --------Events-------- */
section.events {
padding: 60px 0;
}
.thead-blue {
background-color: #00aecc;
color: #fff;
}
/* --------Footer-------- */
.container-fluid--footer {
margin-right: auto;
margin-left: auto;
padding-left: 25px;
padding-right: 25px;
max-width: 800px;
}
.page-footer {
background-color: #125687;
bottom: 0;
margin: 0;
padding: 60px 0;
}
.footer-info {
display: inline;
}
.footer-1 {
text-align: center;
}
.footer-2 {
text-align: center;
}
.footer-1 h3, .footer-2 h3,
.footer-1 p, .footer-2 p,
.footer-1 a, .footer-2 a {
color: #fff;
}
.footer-nav {
padding-top: 60px;
text-align: center;
margin: 0 auto;
}
.footer-nav ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 0;
}
.footer-nav li {
display: inline;
padding: 0;
font-size: 14px;
}
.footer-nav li:before {
display: none;
}
.footer-nav li:after {
content: "|";
color: #a7a298;
padding: 0 10px;
}
.footer-nav li:nth-last-child(1):after {
display: none;
}
.footer-nav a {
color: #fff;
}
.copyright {
font-size: 14px;
padding-top: 15px;
margin: 0;
color: #fff;
}
/* --------Font Awesome Styles-------- */
@font-face {
font-family: 'FontAwesome';
src: url('fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
.fa {
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.fa-twitter-square:before {
content: "\f081";
}
.fa-rss-square:before {
content: "\f143";
}
.fa-linkedin-square:before {
content: "\f08c";
}
i.fa.fa-rss-square, i.fa.fa-linkedin-square, i.fa-twitter-square, i.fa-facebook-square {
font-size: 20px;
color: #00aecb;
}
.fa-facebook-square:before {
content: "\f082";
}
i.fa:hover {
color: #125687;
}
a.social-icon::after {
background-color: #fff !important;
content: none;
}
/* --------Media Queries-------- */
@media (max-width: 1024px){
input[type=submit] {padding: 14px 25px;}
h1 {font-size: 32px;}
.hero h1 {font-size: 38px;}
h2 {font-size: 25px;}
}
@media (min-width: 901px) {
section.main-content>div.container-fluid {
display: flex;
flex-direction: row-reverse;
}
}
@media (max-width: 991px){
img.img-responsive.text-img {padding: 0 0 20px 0;}
.col-lg-7.main-text {padding: 0 20px;}
}
@media (max-width: 900px){
input[type=submit] {padding: 14px 40px;}
section.background-grey {
padding: 40px 0 30px 0;
}
.main-content--text {
padding: 0;
width: 100%;
}
h1 {font-size: 30px;}
.subtitle {
font-size: 16px;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #007caa;
opacity: 0.6;
}
.col-sm-6.hero-text {
flex: 80%;
max-width: 80%;
}
}
@media (max-width: 767px){
.valueprop:nth-child(n+2) {
border-left: none;
}
.hero, .hero.sessions, .hero.subscribe {
padding: 80px 0 70px 0;
}
img.pdf-thumb {
width: 200px;
margin: -20px 0 0 0;
}
}
@media (max-width: 580px){
.hero, .hero.sessions, .hero.subscribe {padding: 48px 0 38px 0}
nav li {
padding: 0 3px;
}
header {
height: inherit;
}
.col-sm-6.hero-text {
flex: 100%;
max-width: 100%;
}
header .container-fluid {
text-align: center;
}
nav {
padding: 10px 0 20px 0;
float: none;
}
nav ul {
float: none;
text-align: center;
}
.logo {
width: 65%;
padding: 15px 0 0;
}
.hero h1 {font-size: 26px;}
.hero h3 {font-size: 16px;}
h1 {font-size: 26px;}
.subtitle {
font-size: 14px;
}
.btn {
width: 100%;
}
h2 {font-size: 22px;}
section.background-grey, section.background-white, section.events {padding: 30px 0 20px 0;}
section.background-white.valueprop-content {padding: 40px 20px;}
input[type=submit] {padding: 14px 25px;}
form {padding: 0 20px 30px;}
.download-form h3 {font-size: 16px;}
img.pdf-thumb {
width: 150px;
margin: -10px 0 0 0;
}
}
@media (max-width: 460px){
img.pdf-thumb {
width: 150px;
margin: 10px 0 0 0;
}
}
@media (max-width: 360px){
.hero {
/*background: url(img/hero-1-xsm.jpg) no-repeat;
background-size: cover;*/
}
}
@media (max-width: 320px){
.container, .container-fluid {
padding-left: 20px;
padding-right: 20px;
}
}<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<section class="background-white valueprop-content">
<div class="container-fluid">
<div class="center">
<div class="row">
<div class="col-lg-3 valueprop">
<img class="valueprop-icon" src="img/session-icon.png" alt="session icon" style="max-width: 100%; height: auto;" />
<h3>Explore sessions</h3>
<p>Tour Geneia’s educational sessions which include topics such as AI, machine learning and SDoH.</p>
<a class="btn btn-teal" href="explore-sessions.html" target="_blank">View sessions </a>
</div>
<hr class="d-block d-lg-none">
<div class="col-lg-3 valueprop">
<img class="valueprop-icon" src="img/meeting-icon.png" alt="meeting icon" style="max-width: 100%; height: auto;" />
<h3>Schedule a meeting</h3>
<p>Request a meeting with on-site experts to learn more about our offerings and views demos.</p>
<a class="btn btn-teal" href="mailto:geneia@geneia.com?subject=Schedule a meeting at HIMSS" target="_blank">Request a meeting</a></div>
<hr class="d-block d-lg-none">
<div class="col-lg-3 valueprop">
<img class="valueprop-icon" src="img/email-icon.png" alt="email icon" style="max-width: 100%; height: auto;" />
<h3>Connect with us</h3>
<p>Stay up-to-date on our activities, including HIMSS19</p>
<br class="d-none d-sm-block">
<a class="btn btn-teal" href="form.html" target="_blank">Sign up</a>
</div>
<hr class="d-block d-lg-none">
<div class="col-lg-3 valueprop">
<img class="valueprop-icon" src="img/find-icon.png" alt="find icon" style="max-width: 100%; height: auto;" />
<h3>Find us at HIMSS</h3>
<p>Explore our solutions and services at booth 541 in the exhibit hall.</p>
<br class="d-none d-sm-block">
<a class="btn btn-teal" href="https://himss19.mapyourshow.com/7_0/floorplan/index.cfm?hallID=S&selectedBooth=booth~541" target="_blank">Locate our booth</a>
</div>
</div>
</div>
</div>
</section>
答案 0 :(得分：0)
使用Flexbox在div中均匀分配项目。
.col-lg-3 {
display: flex;
flex-direction: column;
justify-content: space-between;
}