html - 如何并排添加另一个带有CSS的阅读更多按钮

标签 html css

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

    .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>
如果您看到该片段，您会看到“阅读更多”字样。我怎样才能让另一个阅读更多按钮并排放置？我什至可能想要三个“阅读更多”按钮，每个按钮在不同的模型框中打开。

最佳答案

内联的两个阅读更多按钮可能是 float 属性起作用

添加
.view a.info{ 向左飘浮; }

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

关于html - 如何并排添加另一个带有CSS的阅读更多按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45664380/

上一篇：javascript - 从随机部分加载页面时将类添加到标题

下一篇：javascript - 在 CSS 中，如何突出显示链接中的所有图像并在这些图像周围应用边框并应用于整个网站？

相关文章：

html - 是否值得使用 *{margin :0; padding:0;} as resetting purpose

css - 为什么我得到这么多 br 标签

html - 固定网页上的表格布局

css - 组合过滤器和 :hover in Chrome 时的奇怪行为

html - 该网站如何执行此特定功能？

html - 如何使用媒体断点设置 css 中的列数

html - 一旦某个元素结束就停止滚动

css - SCSS 中的媒体查询 - 语法错误

html - Bootstrap 导航问题 - 响应问题

Javascript:选择一个文本节点

©2024 IT工具网  联系我们