如果您看到该片段，则会看到“阅读更多”。如何让另一个阅读更多按钮并排放置？我甚至可能想要三个“阅读更多”按钮，每个按钮在不同的模型框中打开。
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 1000px;
max-width: 90%;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
h1 {
color:green;
padding-left:10px
}
#hover {
color:rgba(188,175,204,0.9)
}
h2#testimonials {
color:#fffae3
}
div#all {
height: 90%;
width: 100%;
max-height: 900px;
display: flex;
overflow: overlay;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border-style: solid;
border-width: 1px;
background: #634c30
}
.view {
float:left;
border:5px solid #fff;
overflow:hidden;
position:relative;
text-align:center;
box-shadow:1px 1px 2px #e6e6e6;
cursor:default;
background:#fff url(../images/bgimg.jpg) no-repeat center center;
margin:10px
}
.view .mask,.view .content {
width:100%;
height:100%;
position:absolute;
overflow:auto;
top:0;
left:1px;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center
}
.view img {
display:block;
position:relative
}
.view h2 {
text-transform:uppercase;
color:white;
text-align:center;
position:relative;
font-size:25px;
font-family:Raleway, serif;
margin:20px 0 0;
padding:10px
}
.view p {
font-family:Merriweather, serif;
font-style:italic;
font-size:14px;
position:relative;
color:black;
text-align:center;
padding:0
}
.view a.info{
display: inline-block;
text-decoration: none;
background: #000;
color: white;
font-family: Raleway, serif;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
padding: 2px 10px;
margin: 4px;
}
.view a.info:hover {
box-shadow:0 0 5px #000
}
.view-tenth img {
width:650px;
height:200px;
transform:scaleY(1);
transition:all 3s ease-in-out
}
.view-tenth .mask {
background-color:rgba(255,231,179,0.3);
transition:all .5s linear;
opacity:0
}
.view-tenth h2 {
border-bottom:1px solid rgba(0,0,0,0.3);
background:transparent;
transform:scale(0);
color:green;
transition:all 3.5s linear;
opacity:0;
margin:20px 40px 0
}
.view-tenth p {
color:red;
opacity:0;
transform:scale(0);
transition:all 2.5s linear
}
.view-tenth a.info {
opacity:0;
transform:scale(0);
transition:all 4.5s linear
}
.view-tenth:hover img {
-webkit-transform:scale(10);
transform:scale(10);
opacity:0
}
.view-tenth:hover .mask {
opacity:1
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
transform:scale(1);
opacity:1
} <div id="all">
<div class="view view-tenth">
<img src=" https://drive.google.com/uc?id=0B3ZYwq9eGZ49VWJOM0lCSkpXaDg" />
<div class="mask">
<h2>The Only Living Boy in New York</h2>
Words and such, a whole lot more of muh flippin' words.
<a class="info" href="#openModal">Read More</a>
<div id="openModal" class="modalDialog">
<div> <a href="#close" title="Close" class="close">X</a>
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p></div>
</div>
</div>
答案 0 :(得分：1)
两个阅读更多按钮内联可能是float属性工作
添加
.view a.info{
float:left;
}
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 1000px;
max-width: 90%;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
h1 {
color:green;
padding-left:10px
}
#hover {
color:rgba(188,175,204,0.9)
}
h2#testimonials {
color:#fffae3
}
div#all {
height: 90%;
width: 100%;
max-height: 900px;
display: flex;
overflow: overlay;
flex-wrap: wrap;
justify-content: center;
align-items: center;
border-style: solid;
border-width: 1px;
background: #634c30
}
.view {
float:left;
border:5px solid #fff;
overflow:hidden;
position:relative;
text-align:center;
box-shadow:1px 1px 2px #e6e6e6;
cursor:default;
background:#fff url(../images/bgimg.jpg) no-repeat center center;
margin:10px
}
.view .mask,.view .content {
width:100%;
height:100%;
position:absolute;
overflow:auto;
top:0;
left:1px;
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center
}
.view img {
display:block;
position:relative
}
.view h2 {
text-transform:uppercase;
color:white;
text-align:center;
position:relative;
font-size:25px;
font-family:Raleway, serif;
margin:20px 0 0;
padding:10px
}
.view p {
font-family:Merriweather, serif;
font-style:italic;
font-size:14px;
position:relative;
color:black;
text-align:center;
padding:0
}
.view a.info{
float:left;
text-decoration: none;
background: #000;
color: white;
font-family: Raleway, serif;
text-transform: uppercase;
box-shadow: 0 0 1px #000;
padding: 2px 10px;
margin: 4px;
}
.view a.info:hover {
box-shadow:0 0 5px #000
}
.view-tenth img {
width:650px;
height:200px;
transform:scaleY(1);
transition:all 3s ease-in-out
}
.view-tenth .mask {
background-color:rgba(255,231,179,0.3);
transition:all .5s linear;
opacity:0
}
.view-tenth h2 {
border-bottom:1px solid rgba(0,0,0,0.3);
background:transparent;
transform:scale(0);
color:green;
transition:all 3.5s linear;
opacity:0;
margin:20px 40px 0
}
.view-tenth p {
color:red;
opacity:0;
transform:scale(0);
transition:all 2.5s linear
}
.view-tenth a.info {
opacity:0;
transform:scale(0);
transition:all 4.5s linear
}
.view-tenth:hover img {
-webkit-transform:scale(10);
transform:scale(10);
opacity:0
}
.view-tenth:hover .mask {
opacity:1
}
.view-tenth:hover h2,.view-tenth:hover p,.view-tenth:hover a.info {
transform:scale(1);
opacity:1
} <div id="all">
<div class="view view-tenth">
<img src=" https://drive.google.com/uc?id=0B3ZYwq9eGZ49VWJOM0lCSkpXaDg" />
<div class="mask">
<h2>The Only Living Boy in New York</h2>
Words and such, a whole lot more of muh flippin' words.
<a class="info" href="#openModal">Read More</a>
<a class="info" href="#openModal">Read More</a>
<div id="openModal" class="modalDialog">
<div> <a href="#close" title="Close" class="close">X</a>
<h2>Modal Box</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p></div>
</div>
</div>