如何将图像放在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

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

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

另请注意，图像需要高于其余内容才能使浮点运行。

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

<强>小提琴：

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;
}

Answer 2

在主div中使用flex，flex-direction将是row。在主div中取另一个div来显示图像。 Here the link which may help you...