<分区>
<分区>
我一直在尝试在不使用 html 表格的情况下并排设置 2 个 div。 我尝试了 CSS display:inline、float、margins 和 padding 组合，但仍然无法获得预期的效果。
代码是 2 个屏幕，一个 Canvas 和一个 SVG，每个屏幕都有下面的控件。
图像是我能得到的最接近的图像:3
<style>
.etiq1{font-family:verdana; font-size:15px;}
#screen, #vect{border: 1px solid #000000;background-color:#0000FF;}
#pR, #pG,{font-family:arial; font-size:15px; text-align:right;}
#cR, #cG,{width:100px;}
#ctrlsSVG{margin-left:505px;}
</style>
<script>
var screen,paint,vect,pR,pG;
function inicGraf(){
screen = document.getElementById("screen");
vect = document.getElementById("vect");
paint = screen.getContext("2d");
pR=document.getElementById("pR");
pG=document.getElementById("pG");
}
</script>
</head>
<body>
<canvas id="screen" width="500" height="500"></canvas>
<svg id="vect" width="500" height="500"></svg>
<div id="ctrlsCanvas">
<span class="etiq1">CANVAS: click to alternate pattern.</span>
<br />
<span class="etiq1">Modulation (1-30):</span>
<input id="pR" size="1" value="4" min="1" max="30" />
<input id="cR" type="range" value="4" min="1" max="30" step="1"/><span class="etiq1">(auto-renew)</span>
<div/>
<div id="ctrlsSVG">
<span class="etiq1">SVG: click to alternate pattern.</span>
<br />
<span class="etiq1">Modulation (1-10):</span>
<input id="pG" size="1" value="4" min="1" max="10" />
<input id="cG" type="range" value="4" min="1" max="10" step="1" />
<button><span class="etiq1">renew</span></button>
<div/>
<script>
inicGraf();
</script>
</body>
最佳答案
我将向您展示一个使用 HTML/CSS 并排显示 div 的示例。
这是 HTML:
<div id="sides">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
这是 CSS:
#sides {
margin: 0;
}
#left {
float: left;
width: 75%;
overflow: hidden;
}
#right {
float: left;
width: 25%;
overflow: hidden;
}
因此，如果我在您的代码中实现此代码:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div id="wrapper">
<div id="ctrlsCanvas">
<span class="etiq1">CANVAS: click to alternate pattern.</span><br>
<span class="etiq1">Modulation (1-30):</span> <input id="pR" max=
"30" min="1" size="1" value="4"> <input id="cR" max="30" min="1"
step="1" type="range" value="4"><span class=
"etiq1">(auto-renew)</span>
<div></div>
<div id="ctrlsSVG">
<span class="etiq1">SVG: click to alternate pattern.</span><br>
<span class="etiq1">Modulation (1-10):</span> <input id="pG"
max="10" min="1" size="1" value="4"> <input id="cG" max="10"
min="1" step="1" type="range" value="4"> <button><span class=
"etiq1">renew</span></button>
<div></div>
</div>
</div>
</div>
</body>
</html>
#wrapper {
margin: 0;
}
#left {
float: left;
width: 75%;
overflow: hidden;
}
#right {
float: left;
width: 25%;
overflow: hidden;
}
关于html - 2 个 Div 并排，HTML/CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34476987/