css - 如何将图像放在 div 旁边

Question

我有一个带有边框的 div:

表示上面内容的div使用的样式是这样的:

const style = {
            textAlign: "center",
            marginLeft: "20%",
            marginRight: "40%",
            border: "1px solid grey",
            borderRadius: "15px",
            marginBottom: "2%"
};

上面的变量用作 div 的样式。

<div className="ExerciseType" style={style}>
            <h3>{this.props.routine.exercise.charAt(0).toUpperCase() + this.props.routine.exercise.slice(1)}</h3>
            <div>
                {exerciseType}
            </div>
            <img src={determineImage(this.props.routine.exercise)} alt=""
                 data-tip={this.props.routine.exercise}/>
</div>

图像显示在带元素符号的组件下方，但是，我试图将其显示在带元素符号文本的右侧。

环顾四周，似乎答案是为包含 {exerciseType} 的 div 设置一种样式，使其向左浮动，将图像向右浮动。

然而，这完全扭曲了边界，图像和文本泄漏并且不符合其实际边界。

那么，我应该如何添加样式或重新格式化组件，使元素符号和图像并排放置，并且边框完全包围它们？

Answer 1

您需要清除 float ，使用 clearfix 或隐藏在父级上的溢出。

在这个例子中我使用了 clearfix。

另请注意，图片需要高于其余内容才能使 float 起作用。

Clearfix:https://css-tricks.com/snippets/css/clear-fix/

fiddle :

http://jsfiddle.net/ypod85oz/1/

CSS

.ExerciseType {
  border: 1px solid #555;
  border-radius: 10px;
  padding: 20px;
}
.ExerciseType:after {
  content: "";
  display: table;
  clear: both;
}
img {
  float: right;
  width: 200px;
}
* {
  font-size: 20px;
  font-family: arial;
}