更换按钮

问题描述 投票：0回答：1

我试图搜索我的问题的解决方案，但我无法找到它，因为我的英语不好，所以我道歉，如果我的问题已经有了答案。

enter image description here

我想把我的按钮放在我在图中给你看的那个位置。如果可能的话，我想用'flex'来做。但这并不重要。

以下是代码（我只写了这一部分）。

    *{
        padding:0;
        margin:0;
        box-sizing: border-box;
    }
    
    body{
        background-image: url('img/bg.png');
        font-family: 'Roboto', 'sans-serif';
    }
    
    a{
        text-decoration: none;
    }
    
    ul{
        list-style: none;
    }
    
    .container{
        padding-left:2rem;
        padding-right:2rem;
    }
    
    .container-deep{
        padding-left:8rem;
        padding-right:8rem;
    }
    
    /*about-me start*/
    
    .about-me .card{
        background:white;
        box-shadow:2px 2px 15px rgba(0,0,0,0.4);
        padding:4rem;
        display:flex;
        border-radius:10px;
    }
    
    .about-me .card-info{
        margin-left:5rem;
        display:flex;
        flex-direction: column;
    }
    
    .about-me .card .card-info h3{
        margin-top:.3rem;
        margin-bottom:1rem;
        font-size:.8rem;
        font-weight: bold;
    }
    
    .about-me .card .card-info p{
        opacity:.8;
        margin-bottom:1rem;
    }
    
    .about-me .card .card-info a{
        background:black;
        border: 1px solid black;
        color:white;
        padding: .7rem 1.5rem .7rem 1.5rem;
        align-self: flex-end;
        justify-self: center;
    }
    
    .about-me .card .card-info a:hover{
        background:white;
        color:black;
        border: 1px solid black;
    }
    
    .about-me .card .card-image img{
      width:125vh;
    }
    
    /*about-me end*/
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Emir">
        <meta name="keywords" content="full, stack, web, development">
        <meta name="description" content="Full Stack Web Development">
        <title>Full-Stack Web Site</title>
        <link rel="stylesheet" href="style.css">
        <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
    </head>
    <body>
        <section>
            <div class="about-me container">
                <div class="card">
                    <div class="card-image">
                        <img src="https://images.pexels.com/photos/2941570/pexels-photo-2941570.jpeg?auto=compress&cs=tinysrgb&h=750&w=1260">
                    </div>
                    <div class="card-info">
                        <h1>About Me</h1>
                        <h3>Full-Stack Web Developer</h3>
                        <p>
                            Merhaba, ben Emir.
                            Kendimi web alanında geliştirebilmek adına sürekli araştırmalar yaparak full-stack developer olmayı hedefliyorum.
                            Yaptığım çalışmaları ve sahip olduğum referansları sunabilmek adına bu siteyi yazdım.
                        </p>
                        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Natus illo deleniti nostrum praesentium dignissimos pariatur magnam ipsum perferendis aut ab. Voluptatum, ut sapiente. Fuga dolor corporis quis temporibus quos qui.</p>
    
                        <a href="#">Visit My Blog</a>
                    </div>
                </div>
            </div>
        </section>
    
    </body>
    </html>
html css button responsive
1个回答
0
投票

使用适当的 position:relative|absolute 来重新处理你的问题。在你的代码中添加这个。

//Your button "Visit My Blog"
a{
    position: absolute;
    bottom: 0;
    right: 0;
}

//Your content
div.card-info{
    position: relative;
}
0
投票

使用flex，你必须使用列逻辑，并且在子容器之间留出空间，就像这样。

#container {
    display: flex;
    flex-direction: column;
    height: 45vh;
    width: 40vw;
    justify-content: space-between;
    border-style: solid;
    border-width: 2px;
    border-color: blue;
}

#button {
    border-style: solid;
    border-width: 2px;
    border-color: red;
    width: 10vw;
}
<html>
  <body>
  
    <div id="container">
    
      <div id="text">This is the about me text</div>
      <div id="button">this is the button</div>
      
    </div>
  </body>
</html>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.