隣の画像が削除されると、中央のテキストが数ピクセル移動しています

Question

3つのdivが隣り合っているウェブページがあります。 フレックスボックスを使うのが良いでしょうが、なんらかの理由で私はそれにいくつか問題があります。

とにかくこれは私が画像を削除するときに私が得るものです：

画像が帰ってきたとき、すべてが再び正常です。

誰でも問題の原因を知ることができます。

.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>

Answer 1

イメージがあるが.containerは、画像の高さを取っているので、これが起こっているが、.containerが、それは、コンテンツをminに高さだ軽減され、それを削除した後、それは自動高さの非常に基本的なルールです.containerで高さを減らさない場合は、min-heightからcontainerに設定する必要があります。ここで

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

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

Answer 2

あなたは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>

Answer 3

修正です。

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>