使用CSS對齊項目

Question

所以，基本上我想要做的是將我的項目使用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()); 
    } 
}); 

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

這會把萊夫特賽德DIV定位在父div的左上角（頂部：0像素;左邊：0像素;），其中rightSide DIV將是正確的和父div（top：25px; left：100px;）。然後，您可以保持尺寸/顏色/內容與您的尺寸/顏色/內容相同，並使用頂部/左側樣式將它們放在您想要的位置。

快樂編碼！