Question

我有这个html结构：

  <div id="guide_rubric" class="col-md-2 anti-padding">
    <div id="rubric_1" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>
    <div id="rubric_2" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>
    <div id="rubric_3" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>
    <div class="planificationDescription">
      <p>some text</p>
    </div>
    <button id="guideTripButton" onclick="location.href='/apps/'" class="btn">C'est parti !</button>
  </div>

但是当我在类planificationDescription中添加一些样式时，它会改变所有guide_rubric的样式。

例如，如果我添加背景颜色，则所有其他div都会更改。

我添加这样的div：

<div id="rubric_1" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>

动态。

网站：https://dimitri-dev.facilitatrip.fr/visiter/guide-touristique/Asie/Vietnam/3

这是左边的菜单。

Answer 1

你需要清除其他元素的浮选。请将clear:both;添加到planificationDescription类。

.planificationDescription{
     clear:both;
     background-color:red;
}

Answer 2

正如我在您的网站上看到的那样：https://dimitri-dev.facilitatrip.fr/visiter/guide-touristique/Asie/Vietnam/3

你所有＆＃34;标题＆＃34; id元素有class＆＃34; col-xs-12＆＃34; class，它赋予它们浮动属性。

带有id＆＃34; planificationDescription＆＃34;的元素没有这样的类不是浮动元素，因此它占据了父高的整个高度。

解决方案：

1：

#planificationDescription {
  float: left;
}

2：

<div class="clearfix">
  <div id="rubric_1" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>
   <div id="rubric_2" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>
   <div id="rubric_3" class="col-md-12 anti-padding rubric-text rubric-focus-other"><span onclick="rubric_click(5)" class="span-rubric">Climat et météo</span></div>
  </div>
  <div class="planificationDescription">
      <p>some text</p>
    </div>

Answer 3

如果要为class =“planificationDescription”添加背景颜色，请确保此类具有正确的宽度/高度css，或者您可以在css的背景属性中给出宽度和高度

Answer 4

经过测试!!!

<!--just to be specific and sure-->
<!--Just add another class to the div like-->
<div class="planificationDescription data_at1"><p>some text</p></div>

<!--And in css you would target that like-->
<style>
    div.planificationDescription.data_at1{
        /*style required!!!*/
    }
</style>



<!--Another alternative is to add a unique attr like below-->
<div class="planificationDescription" about="data_at1"><p>some text</p></div>
<!--And in css you would target that like-->
<style>
    div.planificationDescription[about=data_at1]{
        /*style required!!!*/
    }
</style>

为什么儿童div修改会改变所有其他孩子？

4 个答案: