桌子不适合剖面

Question

我做了一张桌子，里面有两个桌子。我将此表放在一个部分中。但它不合适，见下图

如何使其适合该部分？ 这是我的代码

#theme{background-color:red}
.acent{
	padding-left: 14%; padding-right: 14%; 
	}
.startstart {  
	  display: table;
	  width: 100%; 
	  float: left; 
	  background-color:green;}

  .startgauche {
	  display: table-cell; 
	  width: 33.33%; 
	  height:100%;
	  display: inline-block; 
	  float: left; 
  }

  .startdroite {display: table-cell; 
    margin-top: 25px;
  width: 66.66%; 
  height:100%;
  display: inline-block; 
  float: left; }
  

<section id="theme">

  <h2>My title</h2>

	<div class="acent">
		<div class="startstart">


			   <div class="startgauche">
	 			blabla
	 			</div>


	 			<div class="startdroite">			 	
	 			blabla 2
				</div>

		</div>
	</div>
</section>

Answer 1

试试display: flex。以下是更新的解决方案

#theme {
  background-color: red
}
.acent {
  padding-left: 14%;
  padding-right: 14%;
  display: flex;
}
.startstart {
  display: flex;
  width: 100%;
  float: left;
  background-color: green;
}
.startgauche {
  display: table-cell;
  width: 33.33%;
  height: 100%;
  display: inline-block;
  float: left;
}
.startdroite {
  display: table-cell;
  margin-top: 25px;
  width: 66.66%;
  height: 100%;
  display: inline-block;
  float: left;
}

<section id="theme">

  <h2>My title</h2>

  <div class="acent">
    <div class="startstart">
      <div class="startgauche">
        blabla
      </div>
      <div class="startdroite">
        blabla 2
      </div>
    </div>
  </div>
</section>

Answer 2

If you using display table property don't use floating property. its create problems.

please check working fiddle

https://jsfiddle.net/b4mhL0q0/

Answer 3

Google clearfix。

最简单的解决方案是

#theme { 
  overflow: hidden;
}

＆＃13;

＆＃13;

#theme{background-color:red; overflow: hidden;}
.acent{
	padding-left: 14%; padding-right: 14%; 
	}
.startstart {  
	  display: table;
	  width: 100%; 
	  float: left; 
	  background-color:green;}

  .startgauche {
	  display: table-cell; 
	  width: 33.33%; 
	  height:100%;
	  display: inline-block; 
	  float: left; 
  }

  .startdroite {display: table-cell; 
    margin-top: 25px;
  width: 66.66%; 
  height:100%;
  display: inline-block; 
  float: left; }

＆＃13;

<section id="theme">

  <h2>My title</h2>

	<div class="acent">
		<div class="startstart">


			   <div class="startgauche">
	 			blabla
	 			</div>


	 			<div class="startdroite">			 	
	 			blabla 2
				</div>

		</div>
	</div>
</section>

＆＃13;

＆＃13;

＆＃13;

Answer 4

你正在使用主要div中的float:left创建问题，需要使用以下html清除浮动

<强> HTML

<section id="theme">

  <h2>My title</h2>

  <div class="acent">
    <div class="startstart">


      <div class="startgauche">
        blabla
      </div>


      <div class="startdroite">
        blabla 2
      </div>

    </div>
    <div class="clear">

      </div>
  </div>
</section>

<强> CSS

.clear{
  clear:both
}
#theme {
  background-color: red
}

.acent {
  padding-left: 14%;
  padding-right: 14%;
}

.startstart {
  display: table;
  width: 100%;
  float: left;
  background-color: green;
}

.startgauche {
  display: table-cell;
  width: 33.33%;
  height: 100%;
  display: inline-block;
  float: left;
}

.startdroite {
  display: table-cell;
  margin-top: 25px;
  width: 66.66%;
  height: 100%;
  display: inline-block;
  float: left;
}

工作小提琴：https://jsfiddle.net/eb398g1y/