Question

所以我的网站上有一个方框，右边有一个标题和一个图像。问题是，当屏幕宽度太小时，图像会被压下。相反，我想要的是标题打破了新的一行。

我已尝试在h2上使用maxwidth，以及显示，宽度和位置的各种其他选项，但我无法使其工作。我觉得应该有一个微不足道的解决方案，但我还没有找到它。

HTML

<div class="projects-container">
     <h2>Title that gets too long</h2><img src="img/ddicon.jpg" width="30px">
     <div id="website">
       <p>I like to build websites, I would like to be better at it. So then this happened.</p>
     </div>
</div>

CSS

.projects-container {
  border: 5px solid black;
  border-radius: 20px;
  padding: 10px;
  margin-bottom: 20px;
}

.projects-container > h2 {
  margin: 5px 0px;
  display: inline;
}

.projects-container > img {
  float: right;
}

Answer 1

您需要进行2次简单的更改。

1 - 首先将<img>放在HTML中。

<div class="projects-container">
  <img src="img/ddicon.jpg" width="30px">
  <h2>Title that gets too long</h2>
</div>

2 - 删除display: inline并添加overflow: hidden：

.projects-container > h2 {
  margin: 5px 0;
  overflow: hidden;
}

当您在子元素上使用float时，不要忘记设置父元素的布局。设置布局有很多种方法。例如：

.projects-container {
  overflow: hidden;
}

或者

.projects-container:after {
  display: block;
  clear: both;
  content: '';
}

.projects-container {
  border: 5px solid black;
  border-radius: 20px;
  padding: 10px;
  overflow: hidden;
  margin-bottom: 20px;
}

.projects-container > h2 {
  margin: 5px 0px;
  overflow: hidden;
}

.projects-container > img {
  float: right;
}

<div class="projects-container">
    <img src="img/ddicon.jpg" width="30px">
     <h2>Title that gets too long</h2>
     <div id="website">
       <p>I like to build websites, I would like to be better at it. So then this happened.</p>
     </div>
</div>

Answer 2

宽度添加calc function

.projects-container > h2 {
  margin: 5px 0px;
  display: inline-block;
  width:calc(100% - 35px);
}

https://jsfiddle.net/sjmxd9f4/

打破h2标题而不是运动图像

2 个答案: