所以，基本上我要做的就是使用CSS对齐和放置我的项目到正确的位置，但我对实际做的事情有点困惑。
所以这是我目前的演示。
http://codeeplus.net/skel/demo.php
我正在尝试将其定位为：http://gyazo.com/366945489995806575c8bb8a0dc6b91d.png
很抱歉这是一个糟糕的草图，但它已经很晚了，我只是想让你更好地理解：）
我可以在这里添加一些代码，但您可以使用chrome开发人员工具或查看源代码，以便在需要时查看更多代码。
如果您需要任何其他信息和代码，请告诉我们！ ：）
CSS：
#webcam2 {
float:left;
}
#webcam {
float:left;
}
#chatWindow {
width:320px;
height:75px;
overflow-y:scroll;
overflow-x:auto;
border:1px solid grey;
font-size:11px;
padding:5px;
background-color:white;
}
#volumeMeter {
background-image:url('ledsbg.png');
width:19px;
height:133px;
padding-top:5px;
}
#volumeMeter img {
padding-left:4px;
padding-top:1px;
display:block;
}
.ui-slider {
background:none;
background-image:url('trackslider.png');
border:0;height:107px;
margin-top:16px;
}
.ui-slider .ui-slider-handle {
width:14px;
height:32px;
margin-left:7px;
margin-bottom:-16px;
background:url(volumeslider.png) no-repeat;
}
#volumePanel {
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
background-color:#4B4B4B;
width:55px;
height:160px;
-moz-box-shadow: 0px 3px 3px #333333;
-webkit-box-shadow: 0px 3px 3px #333333;
shadow: 0px 3px 3px #333333;
}
#setupPanel {
width:325px;
height:30px;
}
HTML：
<div id="parenntContainer" style="position: absolute;">
<div id="leftSide" style="position: relative; top: 0px; left: 0px;">
<div id="webcam2">
</div>
<div id="setupPanel">
<img src="webcamlogo.png" style="vertical-align:text-top"/>
<select id="cameraNames" size="1" onChange="changeCamera()" style="width:145px;font-size:10px;height:25px;">
</select>
<img src="miclogo.png" style="vertical-align:text-top"/>
<select id="microphoneNames" size="1" onChange="changeMicrophone()" style="width:128px;font-size:10px;height:25px;">
</select>
</div>
<div id="chatWindow"></div>
<input type="text" id="message" style="width:635px;">
</div>
<div id="rightSide" style="position: relative; top: 25px; left: 100px;">
<div id="webcam">
</div>
<div id="volumePanel" style="float:left;position:relative;top:10px;">
<div id="volumeMeter" style="position:absolute;top:10px;left:7px;float:left;">
</div>
<div id="slider" style="position:absolute;top:10px;left:30px;">
</div>
</div>
<br clear="both"/>
</div>
</div>
其余的是用jQuery完成的：）
jQuery的：
$(document).ready(function() {
$("#webcam2").scriptcam({
showMicrophoneErrors:false,
onError:onError,
cornerRadius:20,
cornerColor:'e3e5e2',
onWebcamReady:onWebcamReady,
onPictureAsBase64:base64_tofield_and_image
});
$("#webcam").scriptcam({
chatWindow:'chatWindow',
onError:onError,
zoom:.5,
rotate:-5,
zoomChat:1.8,
canvasHeight:430,
cornerRadius:0,
canvasWidth:576,
posX:30,
posY:280,
promptWillShow:promptWillShow,
showMicrophoneErrors:false,
onWebcamReady:onWebcamReady,
connected:chatStarted,
setVolume:setVolume,
timeLeft:timeLeft,
loginName:'username256684',
chatRoom:'demochatroom'
});
function base64_tofield() {
$('#formfield').val($.scriptcam.getFrameAsBase64());
};
function base64_toimage() {
$('#image').attr("src","data:image/png;base64,"+$.scriptcam.getFrameAsBase64());
};
function base64_tofield_and_image(b64) {
$('#formfield').val(b64);
$('#image').attr("src","data:image/png;base64,"+b64);
};
setVolume(0);
$("#slider").slider({ animate: true, min: 0, max: 100 , value:50, orientation: 'vertical', disabled:true});
$("#slider").bind("slidechange", function(event, ui) {
$.scriptcam.changeVolume($("#slider" ).slider("option", "value"));
});
$("#message").keypress(function(event) {
if (event.which == 13) {
event.preventDefault();
$.scriptcam.sendMessage($('#message').val());
$('#message').val('');
}
});
});
function closeCamera() {
$("#slider").slider("option","disabled", true);
$.scriptcam.closeCamera();
}
function onError(errorId,errorMsg) {
alert(errorMsg);
}
function chatStarted() {
$("#slider" ).slider("option", "disabled", false);
}
function onWebcamReady(cameraNames,camera,microphoneNames,microphone,volume) {
$("#slider" ).slider("option", "value", volume);
$.each(cameraNames, function(index, text) {
$('#cameraNames').append( $('<option></option>').val(index).html(text))
});
$('#cameraNames').val(camera);
$.each(microphoneNames, function(index, text) {
$('#microphoneNames').append( $('<option></option>').val(index).html(text))
});
$('#microphoneNames').val(microphone);
}
function promptWillShow() {
alert('A security dialog will be shown. Please click on ALLOW and wait for a second chat partner to arrive.');
}
function setVolume(value) {
value=parseInt(32 * value / 100) + 1;
for (var i=1; i < value; i++) {
$('#LedBar' + i).css('visibility','visible');
}
for (i=value; i < 33; i++) {
$('#LedBar' + i).css('visibility','hidden');
}
}
function timeLeft(value) {
$('#timeLeft').html(value);
}
function changeCamera() {
$.scriptcam.changeCamera($('#cameraNames').val());
}
function changeMicrophone() {
$.scriptcam.changeMicrophone($('#microphoneNames').val());
}
});
答案 0 :(得分：1)
在进入样式之前 - 我建议一个动态插入图像的html标签的功能，它可以真正清理你的html页面。打耳光的东西会是这样的：
function insertLedBar() {
for (var x = 32; x > 20; x--) {
$("#volumeMeter").append('<img id="LedBar" + x + " src=ledred.png">');
}
for (var x=20; x > 0; x--) {
$("#volumeMeter").append('<img id="LedBar" + x + " src=ledgreen.png">');
}
}
对于样式和位置，我会考虑创建容器Div，并使用位置绝对和相对。然后你可以使用top和left将每个div准确定位在父容器div中你想要的位置。还有其他选项可以更加动态，包括浮动和显示：表项，但从项目的外观调整和放置将是非常静态的。
例如：
<div id="parenntContainer" style="position: relative;">
<div id="leftSide" style="position: absolute; top: 0px; left: 0px;"></div>
<div id="rightSide" style="position: absolute; top: 25px; left: 100px;"></div>
</div>
这会将leftSide div放在父div的左上角（top：0px; left：0px;），其中rightSide div将位于父div的右下方（top：25px;左：100px;）。然后，您可以保持您的尺寸/颜色/内容与您的相同，然后使用顶部/左侧样式将它们放置在您想要的位置。
快乐的编码！