Question

你能帮助我吗，我花了很多时间来解决这个问题。我有2个滑块，我需要将每个幻灯片分成2个列。问题是第二列浮动：右边没有显示在两个滑块中。这是一个代码笔，显示问题codepen 谢谢

这是我的结构：

    .Dash_map_wrapSlider {
	position: absolute;
	overflow: hidden;
	height: 100%;
	width: calc(100% - 3rem);
	bottom: calc(-80% + 10rem);
	left: 3rem;
	background: #fff;
	border: 1px solid;
	transition: 0.5s;
	z-index: 1;}

    .Dash_map_wrapSlider:hover{
	bottom: 0rem;
	transition: 0.5s;}

    .Dash_map_wrapSlider:hover{
	bottom: 0rem;
	transition: 0.5s;}
    
    .Dash_map_wrapSliderchoise {
	background: #3E474F;
	box-shadow: 0 .5em 1em #111;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 900;
	width: 100%;
	height: 2rem;
	line-height: 2rem;
	text-align: center;
	vertical-align: middle;}

    .Dash_map_sumSlide {
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 100%;
	z-index: 10;
	background-color: #fff;
	transition: left 0s .75s;}

    .clsDashMap_sumSlideInput {
	display: none;
	height: 11rem;}

    .clsDashMap_sumSlideTitle {
	position : absolute;
	top:0;
	width: 100%;
	height: 2rem;
	left: inherit;
	color: #fff;
	background-color: #73b9ff;
	text-align: center;
	font-weight: bold;
	font-size: 1.20rem;}

    .clsDashMap_sumSlideContentBoxTitle {
	font-weight: bold;
	color: #666;}

    .clsDashMap_sumSlideSiteContentSummary {
	position : absolute;
	top: 2rem;
	width: 100%;
	height: 16rem;
	color: #000000;
	background-color: aliceblue;
	text-align: center;}

    .clsDashMap_sumSlideContent {
	position: absolute;
	top: 20rem;
	margin: auto;
	width: 100%;
	color: #000000;}

    [id^="Dash"]:checked + .Dash_map_sumSlide {
	left: 0;
	z-index: 100;
	transition: left .65s ease-out;}

    .Dash_map_wrapSliderchoise label {
	color: #fff;
	cursor: pointer;
	display: inline-block;
	line-height: 2rem;
	font-size: 0.75rem;
	font-weight: bold;
	padding: 0 1em;}

    .clsDashMap_sumSlideContentBox {
	margin: auto;
	float: left;
    padding: 10px;
    text-align: center;}

<div class="Dash_map_wrapSlider">
				<div style="border: 1px solid red;width: 100%;">
					<input id="Dash_map_sumSlideSite" class="clsDashMap_sumSlideInput" type="radio" name="slides" checked>
					<div class="Dash_map_sumSlide slide_Site " style="float: left;width: 50%;border: 2px solid yellow;">
						<div class="clsDashMap_sumSlideTitle">SITE</div>
						<div class="clsDashMap_sumSlideSiteContentSummary">
							<div class="clsDashMap_sumSlideContentBox">
								<div class="clsDashMap_sumSlideContentBoxTitle">Etat</div>
								<div class="green led">OK</div>
								<div class="red led">KO</div>
							</div>
							<div class="clsDashMap_sumSlideContentBox">
								<div class="clsDashMap_sumSlideContentBoxTitle">AlarmesSite</div>
								<canvas id="pieChartAlm" ></canvas>
							</div>
							<div class="clsDashMap_sumSlideContentBox">
								<div class="clsDashMap_sumSlideContentBoxTitle">TicketsSite</div>
								<canvas id="pieChartTkt" ></canvas>
							</div>
						</div>
						<div class="clsDashMap_sumSlideContent">put here content</div>
					</div>
					
					<div class="Dash_map_sumSlide slide_Alarme" style="float: right;width: 50%; border: 2px solid green;">
						<div class="clsDashMap_sumSlideTitle" >ALARME</div>
						<div class="clsDashMap_sumSlideSiteContentSummary">
							<div class="clsDashMap_sumSlideContentBox">
								<div class="clsDashMap_sumSlideContentBoxTitle">Etat</div>
								<div class="green led">OK</div>
								<div class="red led">KO</div>
							</div>
							<div class="clsDashMap_sumSlideContentBox">
								<div class="clsDashMap_sumSlideContentBoxTitle">ALARME1Alm</div>
								<canvas id="pieChartAlm" ></canvas>
							</div>
							<div class="clsDashMap_sumSlideContentBox">
								<div class="clsDashMap_sumSlideContentBoxTitle">Tickets1Alm</div>
								<canvas id="pieChartTkt" ></canvas>
							</div>
						</div>
						<div class="clsDashMap_sumSlideContent">put here content</div>
					</div>
				</div>
					
				<div style="border: 1px solid red;">
					<input id="Dash_map_sumSlideAlarme" class="clsDashMap_sumSlideInput" type="radio" name="slides" checked>			
					<div class="Dash_map_sumSlide slide_Site " style="width: 50%;border: 2px solid black;">
						<div class="clsDashMap_sumSlideTitle">TECHNICIEN</div>
						<div class="clsDashMap_sumSlideSiteContentSummary">
							<div class="clsDashMap_sumSlideContentBox">
								<div class="clsDashMap_sumSlideContentBoxTitle">Etat</div>
								<div class="green led">OK</div>
								<div class="red led">KO</div>
							</div>
							<div class="clsDashMap_sumSlideContentBox">
								<div class="clsDashMap_sumSlideContentBoxTitle">Alarmes2Tech</div>
							</div>
							<div class="clsDashMap_sumSlideContentBox">
								<div class="clsDashMap_sumSlideContentBoxTitle">Tickets2Tech</div>							
							</div>
						</div>
						<div class="clsDashMap_sumSlideContent">put here content</div>
					</div>
						<div class="Dash_map_sumSlide slide_Alarme" style="width: 50%; float: right;border: 2px solid darkturquoise;">
						<div class="clsDashMap_sumSlideTitle" style="position: initial;">ACTION</div>
						<div class="clsDashMap_sumSlideSiteContentSummary">
							<div class="clsDashMap_sumSlideContentBox">
								<div class="clsDashMap_sumSlideContentBoxTitle">Etat</div>
								<div class="green led">OK</div>
								<div class="red led">KO</div>
							</div>
							<div class="clsDashMap_sumSlideContentBox">
								<div class="clsDashMap_sumSlideContentBoxTitle">alarme3Act</div>							
							</div>
							<div class="clsDashMap_sumSlideContentBox">
								<div class="clsDashMap_sumSlideContentBoxTitle">Tickets3Act</div>							
							</div>
						</div>
						<div class="clsDashMap_sumSlideContent">put here content</div>
					</div>
				</div>

Answer 1

你试过Bootstrap Grid吗？我认为这正是你所需要的。

Answer 2

而不是 float：right; 将 left：50％; 提供给第二列

将div拆分为2列不起作用

2 个答案: