当删除旁边的图像时，中间的文字会移动几个像素

时间：2017-08-21 12:50:23

标签： html css

我有一个网页，其中有3个div彼此相邻。 Flexbox会更好用，但由于某种原因，我遇到了一些麻烦。

无论如何，这是我删除图片时得到的结果：

enter image description here

当图像恢复时，一切都恢复正常。

任何人都知道问题可能是什么？

.Capital {
  margin: 0px 0 -5px 0;
  line-height: 38px;
  font-size: 45px;
  font-weight: ligter;
}

.smalltext {
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 12px;
}

.smalltextpub {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 12px;
  margin-left: -10px;
}

.container {
  float: left;
  margin: 0 auto;
  width: 100%;
  display: flex;
}

.left {
  width: 25%;
  margin: 05% 00% 00% 02%;
}

.paragraphs {
  margin: 2% 00% 2% 00%;
  width: 50%;
}

.imageright {
  float: right;
  margin: 02% -10% 0% 00%;
  width: 300px;
  height: 200px;
}

.square {
  border-radius: 25px;
  background: #769DBD;
  padding: 20px;
  width: 80px;
  height: 80px;
  text-align: center;
  color: #fff;
  font-family: Arial;
  padding-top: 10px;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
<div class="container">
  <div class="left">
    <div id="background" class="square"><span class="Capital">B</span>
      <span class="smalltextpub">Background</span></div>
  </div>
  <div class="paragraphs">

    The spatial and social structures of a city such as buildings, the transport infrastructure, parks as well as the dynamic nature of human activities and its underlying processes can trigger different collective and individual human emotions as a person’s
    response to such urban contexts. However, the integration of such human urban emotions into citizen-centric spatial planning processes is a major challenge in order to contribute to a fundamentally changing understanding of spatial and regional planning.
  </div>
  <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" />
</div>
<div class="container">
  <div class="left">
    <div id="results" class="square"><span class="Capital">R</span>
      <span class="smalltext">Results</span></div>
  </div>
  <div class="paragraphs">
    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
  </div>
</div>

3 个答案:

答案 0 :(得分：1)

您可以使用flexbox代替float。

另外，将img包装在容器中。

这可能有助于您入门。

.Capital {
  margin: 0px 0 -5px 0;
  line-height: 38px;
  font-size: 45px;
  font-weight: ligter;
}

.smalltext {
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 12px;
}

.smalltextpub {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 12px;
  margin-left: -10px;
}

.container {
  display: flex;
}

.left {
  flex: 1;
  max-width: 25%;
}

.paragraphs {
  flex: 2;
  max-width: 50%;
}

.image {
  flex: 1;
}

.image img {
  width: 100%;
  height: auto;
}

.square {
  border-radius: 25px;
  background: #769DBD;
  padding: 20px;
  width: 80px;
  height: 80px;
  text-align: center;
  color: #fff;
  font-family: Arial;
  padding-top: 10px;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
<div class="container">
  <div class="left">
    <div id="background" class="square"><span class="Capital">B</span>
      <span class="smalltextpub">Background</span></div>
  </div>
  <div class="paragraphs">

    The spatial and social structures of a city such as buildings, the transport infrastructure, parks as well as the dynamic nature of human activities and its underlying processes can trigger different collective and individual human emotions as a person’s
    response to such urban contexts. However, the integration of such human urban emotions into citizen-centric spatial planning processes is a major challenge in order to contribute to a fundamentally changing understanding of spatial and regional planning.

  </div>
  <div class="image">
    <img class="imageright" src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" /></div>

</div>
<div class="container">
  <div class="left">
    <div id="results" class="square"><span class="Capital">R</span>
      <span class="smalltext">Results</span></div>
  </div>
  <div class="paragraphs">

    Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem
    IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem

  </div>

</div>

答案 1 :(得分：0)

这种情况正在发生，因为,\d{2}$在图像存在的同时占据了图像的高度，但在删除它之后.container将其高度降低到最小内容，它非常自动高度的基本规则，如果您希望.container不降低它的高度，则需要将.container设置为min-height。

＆＃13;
＆＃13; 
container
＆＃13; 
.Capital {
  margin: 0px 0 -5px 0;
  line-height: 38px;
  font-size: 45px;
  font-weight: ligter;
}

.smalltext {
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 12px;
}

.smalltextpub {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 12px;
  margin-left: -10px;
}

.container {
  float: left;
  margin: 0 auto;
  width: 100%;
  display: flex;
  min-height:225px;
}

.left {
  width: 25%;
  margin: 05% 00% 00% 02%;
}

.paragraphs {
  margin: 2% 00% 2% 00%;
  width: 50%;
}

.imageright {
  float: right;
  margin: 02% -10% 0% 00%;
  width: 300px;
  height: 200px;
}

.square {
  border-radius: 25px;
  background: #769DBD;
  padding: 20px;
  width: 80px;
  height: 80px;
  text-align: center;
  color: #fff;
  font-family: Arial;
  padding-top: 10px;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

这是修复。

Use same structure for both (With Image or Without Image HTML)

Go through the code comments 

.Capital {
  margin: 0px 0 -5px 0;
  line-height: 38px;
  font-size: 45px;
  font-weight: ligter;
}
/* Use same style for span class*/
.smalltextpub {
  text-align: center;
  margin-top: 0px !important;
  font-weight: 100px;
  font-size: 12px;
  margin-left: -10px;
}

.container {
  float: left;
  margin: 0 auto;
  width: 100%;
  display: flex;
  margin-bottom:20px;
}

.left {
  width: 25%;
  margin: 05% 00% 00% 02%;
}

.paragraphs {
  margin: 2% 00% 2% 00%;
  width: 50%;
}
/*Some changes here (I have moved class from <img> tag to <div> tag)*/
.imageright {
  float: right;
  margin: 02% -10% 0% 00%;
  width: 300px;
  height: 200px;
}

.square {
  border-radius: 25px;
  background: #769DBD;
  padding: 20px;
  width: 80px;
  height: 80px;
  text-align: center;
  color: #fff;
  font-family: Arial;
  padding-top: 10px;
  text-decoration: none;
}
/*Some changes here*/
.imageright img{
height:100%;
width:100%;
}
* {
  box-sizing: border-box;
}
<div class="container">
  <div class="left">
    <div id="background" class="square"><span class="Capital">B</span>
      <span class="smalltextpub">Background</span></div>
  </div>
  <div class="paragraphs">

    The spatial and social structures of a city such as buildings, the transport infrastructure, parks as well as the dynamic nature of human activities and its underlying processes can trigger different collective and individual human emotions as a person’s
    response to such urban contexts. However, the integration of such human urban emotions into citizen-centric spatial planning processes is a major challenge in order to contribute to a fundamentally changing understanding of spatial and regional planning.
  </div>
  <div class="imageright"> <!-- This is newly created div -->
  <img  src="http://giscience.zgis.at/gisce/wp-content/uploads/2017/08/300x200.png" />
  </div>
</div>



<div class="container">
  <div class="left">
    <div id="background" class="square"><span class="Capital">R</span>
      <span class="smalltextpub">Result</span></div>
  </div>
  <div class="paragraphs">

    The spatial and social structures of a city such as buildings, the transport infrastructure, parks as well as the dynamic nature of human activities and its underlying processes can trigger different collective and individual human emotions as a person’s
    response to such urban contexts. However, the integration of such human urban emotions into citizen-centric spatial planning processes is a major challenge in order to contribute to a fundamentally changing understanding of spatial and regional planning.
  </div>
  <div class="imageright"> <!-- This is newly created div -->
  <!-- Image Removed from here-->
  </div>

相关问题
最新问题