如何并排添加另一个带有css的read more按钮

Question

如果您看到该片段，则会看到“阅读更多”。如何让另一个阅读更多按钮并排放置？我甚至可能想要三个“阅读更多”按钮，每个按钮在不同的模型框中打开。

    .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>

如果您看到该代码段，则会看到“阅读更多”。如何让另一个阅读更多按钮并排放置？我甚至可能想要三个“阅读更多”按钮，每个按钮在不同的模型框中打开。

Answer 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>