Question

我目前正在开发一个关于我的页面，我希望文本框设置在屏幕左侧，并且图片与文本内联运行，但出于某种原因，我只能让图片显示出来下。有人可以告诉我我做错了什么吗？谢谢。

HTML

<div class="about_me">
<h2 class="about">about me</h2>
<p class="bio">I am a Front End Designer that hails from Cadillac, MI.  I have a deep understanding on HTML and CSS, and love designing and coding websites.  I enjoy taking your problems and turning them into solutions.  Whether you need a simple logo or an entire website, I can get it done for you.        </p>
 </div>

<div class="family">
<img src="images/family1.jpg" alt="family">
</div>

CSS

.about_me {width: 500px;
          height: auto;
          border:none;
          visibility: visible;
          right: 0%;
          opacity: 1;

          }

.about {font-size: 45pt;
        font-family: Zumba Fitness Official Typeface;}

.bio {font-family: arial;
      font-size: 14pt;
     }

.family {visibility: visible;
         left: 0%;
         opacity: 1;
        }

Answer 1

.aboutme {float: left;}

试试。

Answer 2

将display: inline-block;添加到.about_me和.family类，并从这两个类中删除左右属性。还添加'float：left;'到.about_me班。

Answer 3

您需要在左侧为图像创建类，在右侧创建文本。

<div style="width: 100%">
<img style="float:right;">

图像不在我想要的地方

3 个答案: