时间戳

首页 > 解决方案 > 使用 CSS 修复文本和文章图像的对齐方式

css - 使用 CSS 修复文本和文章图像的对齐方式

问题描述

  1. 我希望文本与右侧的文章图像很好地对齐。

  2. 我希望必须更改 .watch-listen-link 才能以正确的方式对其进行更改。

.article-side-image{
            
            float: left;
            width: 140px; 
            margin-left: 8px;
            margin-right:4px;
            margin-top: 8px;
            
        }
        
        .watch-listen-link { 
        
            text-decoration: none;
            color: black;
            font-weight: bold;
            font-size: 18px;
        
        }
        
        .watch-listen-link:hover{
            
            color: #1167a8;
            
        }
        
        .side-article {
            float: right;
            width: 250px;
            position: relative;
            top: -13px;
        }
        
        .no-border{
            
            border-left: none;
            padding: 0;
            
        }
        
        .border-right{
            
            border-right: 1px solid #CCCCCC;
        }
        
        
    </style>    





body section: 

img class="article-side-image" src="images/article3.png">
                        
                    <div class= "side-article">

                     <p><a class= "watch-listen-link" href=""> SpaceX rocket explodes during landing </a></p>

                        <p> <img class="clock" src="images/Clock-image.png"> <span class= "date  border-right"> 19 January 2016 </span> <br> <a class="topic-link no-border" href=""> Science & Environment </a>  </p>
                </div>

标签： css

解决方案

您正在尝试构建的东西看起来很像一个媒体对象。这种模式在整个网络上都使用。

你可能不想用float这个。诸如 CSS网格或Flexbox 之类的最新添加使创建媒体对象变得更加容易。

我改编了我之前提到的关于媒体对象的文章中的配方：

.media {
        display: grid;
        grid-template-columns: fit-content(200px) 1fr;
        grid-template-rows:1fr auto;
        grid-template-areas:
            "image content"
            "image footer";
        grid-gap: 20px;
        margin-bottom: 4em;
    }

    .img {
        grid-area: image;
    }

    .content {
        grid-area: content;
    }
<div class="media">

    <div class="img">
    <img src="https://mdn.github.io/css-examples/css-cookbook/balloon-sq2.jpg" alt="Balloons">
</div>

<div class="content">
    <p>
        <a>SpaceX rocket explodes during landing</a>
    </p>
    <p>
        <img class="clock" src="images/Clock-image.png">
        <span class= "date  border-right"> 19 January 2016 </span> <br>
        <a class="topic-link no-border" href=""> Science & Environment </a>
    </p>
</div>

推荐阅读