具有相同水平位置的div

我有一個頁面和兩個div。他們應該出現在相同的頂部位置，但他們出現不同的垂直行。具有相同水平位置的div

一個來與不同的垂直位置和其他出現與不同的垂直位置。

爲什麼他們沒有相同的水平

以下是HTML

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 

    <title></title> 
</head> 
<body> 
<form id="f1" runat="server"> 
<div style="margin-left:100px; top:10px; border-width:10px; width:400px; border-style:solid;"> 
fawad 
</div> 
<div style="margin-left:600px; top:10px; border-width:10px; width:200px; border-style:solid">ali</div> 
</form>

來源

2014-09-26 fc123

由於大多數誰可以幫助你不使用ASP，請務必將所生成的HTML而不是標記與生成HTML。另外，您的文檔類型適用於1999年轉換爲新版本（X）HTML的網頁。自那時起，這種文檔類型不應該用於新的網頁。我建議你使用當前的doctype <！DOCTYPE html> – Rob 2014-09-26 15:14:42

的top CSS樣式不工作，你覺得它的方式。您可能需要使用float代替，但是，如果你想有一個簡單的修復，試試這個：

<form id="f1" runat="server" style="position: relative"> 
<div style="top:10px; border-width:10px; width:400px; border-style:solid; position: absolute; left: 0"> 
fawad 
</div> 
<div style="top:10px; border-width:10px; width:200px; border-style:solid; position: absolute; left: 420px">ali</div> 
</form>

CSS盒模型是極其複雜的，但非常值得學習，如果你做了很多網絡的工作。 float的工作是這樣的：

<div style="float: left">fawad</div> 
<div>ali</div>

來源

2014-09-26 15:07:05 welegan

那是因爲給你第二次DIV保證金左值..

只是刪除你的第二個div的左緣價值，這添加到您的CSS：

div{ 
    display: inline-block; 
}

所以你的HTML看起來像這樣：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 

    <title></title> 
</head> 
<body> 
<form id="f1" runat="server"> 
<div style="margin-left:100px; top:10px; border-width:10px; width:400px; border-style:solid;"> 
fawad 
</div> 
<div style="top:10px; border-width:10px; width:200px; border-style:solid">ali</div> 
</form>

來源

2014-09-26 15:09:40 undefinedtoken

位置必須在連鎖行業如果你是頂級的。我可以在你的代碼中看到沒有給div的位置。

我已更正您的HTML代碼。請看下面給出的代碼。它工作正常，滿足您的要求。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 

    <title></title> 
</head> 
<body> 
<form id="f1" runat="server"> 
<div style="margin-left:100px; position:absolute;top:10px; border-width:10px; width:400px; border-style:solid;"> 
fawad 
</div> 
<div style="margin-left:600px; position:absolute;top:10px; border-width:10px; width:200px; border-style:solid">ali</div> 
</form> 
</html>

來源

2014-09-26 15:11:11 Ashish

第二個div有太多餘量，所以它溢出容器並下降到下一個可用空間。另外我相信，如果沒有設置明確的保證金左右值，不管沒有設置，都會填充容器的其餘部分。

<form id="f1" runat="server"> 
<div style="margin-left:100px; top:10px; border-width:10px; width:400px; border-style:solid;display:inline-block"> 
fawad 
</div> 
<div style="margin-left:100px; top:10px; border-width:10px; width:200px; border-  style:solid;display:inline-block">ali</div> 
</form>

來源

2014-09-26 15:13:44

所有我需要的是

display:inline-block

沒有更多的也不少

來源

2014-09-28 10:09:26 fc123

具有相同水平位置的div

回答

相關問題