Question

我正在尝试使用codepen将图像放在屏幕右侧，左侧有一些文本位于同一高度。我最初使用了一个boostrap容器将它们放在插槽中，但有人告诉我，当我将它连接到freecodecamp帮助时，导致我的codepen混乱的原因。我也试过浮动图像，但它似乎根本没有做任何事情。

这是我的HTML：

<div style="background-color:#999; overflow:hidden;" class="well">
<div class="container-fluid">
<h1 class=" text-align-vertically text-center white-text"> <br> <br> <br> Front-End Developer and UX/UI designer, with practical experience in project management, branding strategy, and creative direction; devoted to functional programming and information architecture. <br> <br> <br> <br> </h1> 
<h1 class="text-center white-text"> Web Developer -       User Experience Designer - Graphic Artist <br> <br> <br> <br> <br> </h1>

<img class="smaller-image1 image-margins circular-image resize-image" src="https://lh4.googleusercontent.com/-b5YzMfLsjTY/AAAAAAAAAAI/AAAAAAAAADw/QrZ6m4H7wkA/photo.jpg" alt="my photo">
    </div>

这是我的CSS：

smaller-image1 {
  width: 300px;
  height: 300px;
}

.image-margins {
    float: right;
    width: 300px;
    margin: 0 0 15px 20px;
    padding: 15px;
    border: 1px solid black;
    text-align: center;
}

 .circular-image {
  border-radius: 50%;
}

.resize-image {
  width: 100%;
  height: 100%;
 }

Answer 1

你需要摆脱

.resize-image {
width: 100%;
height: 100%;
}

因为它会使图像占用所有可用区域，并且不会为同一行中的文本留下空间。你还需要将图像放在html文件中的文本之前。

live example

同一行上的图片和文字

1 个答案: