Question

我一直试图在不使用html表的情况下并排设置2个div。我已经尝试过CSS显示：内联，浮动，边距和填充组合，但仍然无法获得所需的效果。

代码是2个屏幕，一个Canvas和一个SVG，每个控件都有一个控件。

图像是我能得到的最接近的图像：3

Notice that the Canvas-controls are in the correct place but the SVG-controls not in the right place and should be in the same line as the canvas-controls.

inline-block

Answer 1

我将使用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;
}

所以如果我在你的代码中实现这个代码：

HTML：

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

CSS：

#wrapper {
    margin: 0;
}

#left {
    float: left;
    width: 75%;
    overflow: hidden;
}

#right {
    float: left;
    width: 25%;
    overflow: hidden;
}

希望这有帮助！并有一个快乐的晚快乐圣诞节： - ）。

Answer 2

使用引导类col-xx-#和col-xx-offset-#

所以这里发生的事情是你的屏幕分为12列。在col-xx-#中，#是您覆盖的列数，offset是您离开的列数。

对于xx，在一般网站中，首选md，如果您希望您的布局在移动设备中看起来相同，则首选xs。

我可以根据您的要求，

<div class="row">
  <div class="col-md-4">Left side Div</div>
  <div class="col-md-8">Right side DIV </div>
</div

应该做的伎俩。

Answer 3

尝试添加CSS：

margin-left: -5px;

到#vect。示例：https://jsfiddle.net/yuxnLtru/

2并排划分，HTML / CSS

3 个答案:

HTML：

CSS：