慕清海 2021-06-22 21:45 采纳率: 72.2%
浏览 33
已采纳

怎么实现左图又文字?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>水星</title>
    <link href="../css文件/土星.css" rel="stylesheet"
          type="text/css">
</head>
<body>
<h1>这里是太阳系</h1>
<div id="navigation">
    <ul>
        <a href="太阳系.html"><li>首页</li></a>
        <a href="太阳.html"><li>太阳</li></a>
        <a href="水星.html"><li>水星</li></a>
        <a href="金星.html"><li>金星</li></a>
        <a href="地球.html"><li>地球</li></a>
        <a href="火星.html"><li>火星</li></a>
        <a href="木星.html"><li>木星</li></a>
        <a href="土星.html"><li>土星</li></a>
        <a href="天王星.html"><li>天王星</li></a>
        <a href="海王星.html"><li>海王星</li></a>
        <a href="联系我们.html"><li>联系我们</li></a>
    </ul>
</div>
<div id="saturn">
   <img src="../img/土星1.jpg">
   <p>土星(英文Saturn,拉丁文Saturnus)是太阳系八大行星之一,至太阳距离(由近到远)位于第六,体积仅次于木星,并与木星、天王星及海王星同属气态巨行星。古代中国土星是中国古代人根据五行学说结合肉眼观测到的土星的颜色(黄色)来命名的,亦称之为镇星(常写作填星)。

       土星主要由氢组成,还有少量的氦与微量元素,内部的核心包括岩石和冰,外围由数层金属氢和气体包裹着。土星的风速高达1800公里/时,行星磁场强度介于地球和更强的木星之间。已经确认的土星的卫星总共有82颗,其中土卫六是土星系统中最大和太阳系中第二大的卫星。土星自转一周等于10小时33分38秒,大约是地球的半天时长。</p>
</div>

<footer>
    
        联系电话115522</p>
</footer>
</body>
</html>


外链
@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
}
body{
    background: url("星空背景.jpg") no-repeat;
    background-size: cover;
}
@font-face {
    font-family: 飘逸;
    src: url(../img/书体方米字体.ttf);
}
h1{
    text-align: center;
    font-family: "飘逸";
    font-size:60px;
    background-color: aquamarine;
    color: #cb3bff
}
#navigation{
    width: 100%;
    height: 30px;
    /*border: 1px solid black;*/
    background-color: rgb( 102 102 153);
}
#navigation ul li{
    display: inline-block;
    line-height: 30px;
    margin-right:60px;
    padding-left: 35px;
    color: white;
}
footer{
    width: 100%;
    height: 60px;
    background-color:rgb( 102 102 153) ;
    position: relative;
    top: 152px;
}
footer p {
    text-align: center;
    line-height: 30px;
}
#saturn img{
    width: 500px;
    height: 344px;
}
#saturn p{
    color: white;
}
  • 写回答

4条回答 默认 最新

  • 努力小张_ 2021-06-22 23:17
    关注

    可以给图片设置左浮动float:left,右边的文字会自动挤上去. 再给父元素使用伪元素::after清除浮动.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题?

悬赏问题

  • ¥15 imageEnView绘图问题
  • ¥15 关于#python#的问题:您好可以加您一下联系方式吗,在复现的时候确实有点问题难以解决
  • ¥15 联想电脑重装系统时无法发现硬盘
  • ¥15 MATLAB与UR10e实体机械臂建立通讯
  • ¥15 c++题需要快一点不用opencv
  • ¥15 关于#java#的问题:想要咨询Flowable流程引擎框架的问题
  • ¥15 vscode里面怎么用plaformio强调串口啊
  • ¥20 针对计算后数据做一致性检验可以用Bland Altman法吗
  • ¥15 win32如何自绘编辑框的背景图片(语言-c++|操作系统-windows)
  • ¥15 微信夜间被转走了1w对,当天手机剪切板里就出现了这个乱码,有铁子可以看看是啥吗可以