2015-11-08 62 views
0

嗨,我是一個ASP.Net初學者。我有一個網頁昨天工作,但現在它已經壞了。我嘗試了我找到的每個解決方案,但它不起作用。我很抱歉,如果有重複的問題,但解決方案不適合我。 你能幫我嗎。 我的代碼是:將圖像對齊到左側不起作用。嘗試文本對齊,浮動等

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <link href="bootstrap.min.css" rel="stylesheet" /> 
    <link href="bootstrap.min.js" rel="stylesheet" /> 
    <link href="bootbox.js" rel="stylesheet" /> 
    <link href="bootbox.min.js" rel="stylesheet" /> 
    <link href="jquery.js" rel="stylesheet" /> 
    <link href ="jquery-1.11.3.min.js" rel="stylesheet" /> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
    <script src="bootstrap.min.js"></script> 

    <script src="bootbox.min.js"></script> 



    <title> 


    </title> 
    <style type="text/css"> 
     .auto-style1 { 
      width: 100%; 
     } 


     .auto-style2 { 
      height: 23px; 
     } 
     .auto-style3 { 
      width: 252px; 
     } 
     .auto-style4 { 
      height: 23px; 
      width: 252px; 
     } 
     .auto-style5 { 
      width: 381px; 
     } 
     .auto-style6 { 
      height: 23px; 
      width: 381px; 
     } 

     #ImageButton2{ 
      position: absolute; 
      top: 0px; 
      right: -1px; } 
     .auto-style7 { 
      width: 5px; 
     } 
     .auto-style8 { 
      height: 23px; 
      width: 5px; 
     } 
     #Image2{ 

       float:left; 
       text-align: left; 

     } 


     .left{ 
      float:left; 

     } 
     .test{ 
      float:left; 
       text-align: left; 

     } 
    </style> 

    <script type="text/javascript" lang="javascript"> 

     function pLogin() { 
      var result; 
      bootbox.confirm("Do you have an existing account?", function (result) { 
       if (result == true) { 
        window.location.href ="/login.aspx" 
       } 
       else 
       {}  
       }); 
       return false 
      } 





    </script> 


</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

     <table class="auto-style1"> 
      <tr> 
       <td class="auto-style7">&nbsp;</td> 
       <td class="auto-style3">&nbsp;</td> 
       <td class="auto-style5">&nbsp;</td> 
       <td>&nbsp;</td> 
       <td>&nbsp;</td> 
      </tr> 
      <tr> 
       <td class="auto-style8"> 
        &nbsp;</td> 
       <td class="auto-style4"> 
        <asp:ImageButton ID="ImageButton1" runat="server" Height="113px" ImageUrl="~/images/baby's logo.png" Width="407px" /> 
       </td> 
       <td class="auto-style6">&nbsp;</td> 
       <td class="auto-style2"></td> 
       <td class="auto-style2"> 
        <asp:ImageButton ID="ImageButton2" runat="server" Height="111px" ImageUrl="~/images/ordernow.jpg" Width="135px" OnClientClick="javascript: return pLogin();" /> 

       </td> 
      </tr> 
     </table> 

    </div> 
    <div> 
     <hr /> 
    </div> 
     <div> 
      <p class="test"> 
       <asp:Image ID="Image2" runat="server" Height="500px" Style="float:left" ImageUrl="~/images/puto cake.jpg" Width="960px" /> 
      </p> 
       </div> 
     <div> 



      </div> 

     <div> 
      <table class="nav-justified"> 
       <tr> 
        <td class="auto-style11">&nbsp;</td> 
        <td class="auto-style22"> 
         <asp:Label ID="Label1" runat="server" Font-Bold="False" Font-Names="Tw Cen MT Condensed Extra Bold" ForeColor="Gray" Text="ORDER" ViewStateMode="Enabled" Width="100px"></asp:Label> 
        </td> 
        <td class="auto-style22"> 
         <asp:Label ID="Label2" runat="server" Font-Bold="False" Font-Names="Tw Cen MT Condensed Extra Bold" ForeColor="Gray" Text="CUSTOMER SERVICE" ViewStateMode="Enabled" Width="239px"></asp:Label> 
        </td> 
        <td class="auto-style16"> 
         <asp:Label ID="Label3" runat="server" Font-Bold="False" Font-Names="Tw Cen MT Condensed Extra Bold" ForeColor="Gray" Text="MY ACCOUNT" ViewStateMode="Enabled" Width="100px"></asp:Label> 
        </td> 
        <td> 
         <asp:Label ID="Label4" runat="server" Font-Bold="False" Font-Names="Tw Cen MT Condensed Extra Bold" ForeColor="Gray" Text="CONNECT WITH BABY'S PUTO CAKE" ViewStateMode="Enabled" Width="317px"></asp:Label> 
        </td> 
       </tr> 
       <tr> 
        <td class="auto-style17"></td> 
        <td class="auto-style23"> 
         <asp:HyperLink ID="HyperLink1" runat="server" Font-Names="Arial Black" ForeColor="Black">Puto Cake</asp:HyperLink> 
        </td> 
        <td class="auto-style23"> 
         <asp:HyperLink ID="HyperLink2" runat="server" Font-Names="Arial Black" ForeColor="Black">Contact Us</asp:HyperLink> 
        </td> 
        <td class="auto-style20"> 
         <asp:HyperLink ID="HyperLink3" runat="server" Font-Names="Arial Black" ForeColor="Black">Create an Account</asp:HyperLink> 
        </td> 
        <td class="auto-style21"> 
         <asp:ImageButton ID="ImageButton3" runat="server" Height="36px" ImageUrl="~/images/Facebook-128 (1).png" Width="44px" /> 
         <asp:ImageButton ID="ImageButton4" runat="server" Height="36px" ImageUrl="~/images/Twitter-Bird-128 (1).png" Width="44px" /> 
         <asp:ImageButton ID="ImageButton5" runat="server" Height="36px" ImageUrl="~/images/youtube_circle_color-512.png" Width="44px" /> 
        </td> 
       </tr> 
       <tr> 
        <td class="auto-style11">&nbsp;</td> 
        <td class="auto-style22">&nbsp;</td> 
        <td class="auto-style22">&nbsp;</td> 
        <td class="auto-style16"> 
         <asp:HyperLink ID="HyperLink4" runat="server" Font-Names="Arial Black" ForeColor="Black">Sign In</asp:HyperLink> 
        </td> 
        <td>&nbsp;</td> 
       </tr> 
       <tr> 
        <td class="auto-style11">&nbsp;</td> 
        <td class="auto-style22">&nbsp;</td> 
        <td class="auto-style22">&nbsp;</td> 
        <td class="auto-style16">&nbsp;</td> 
        <td>&nbsp;</td> 
       </tr> 
       <tr> 
        <td class="auto-style11">&nbsp;</td> 
        <td class="auto-style22">&nbsp;</td> 
        <td class="auto-style22">&nbsp;</td> 
        <td class="auto-style16">&nbsp;</td> 
        <td>&nbsp;</td> 
       </tr> 
      </table> 
     </div> 
    </form> 

    <div> 
     <br /> 
     <br /> 
     <br /> 

    </div> 

    </body> 
</html> 
+0

請提供jsfiddle。 – Alex

回答

0

,因爲我可以看到你沒有讓你像塊元素的圖像(圖像是內聯元素默認情況下)。嘗試在您的CSS類中使用display: block;display: inline-block;,然後使用text-align: left;

浮動元素也可能表現錯誤,因爲即使使用塊級元素它們也會「濃縮」到內容。因此,也嘗試從CSS類中刪除浮動規則或使用clear:left;

+0

我會盡力的。感謝您的幫助! –

+0

嗨,我試了一下。圖像對齊到左側,但不是很大。寬度是1024,但在網頁上很小。 –

+0

@vaughnellisramos如果你想使圖像更大,你可以使用'width:100%;身高100%;對於他們使用不同的百分比值,如果你想讓圖像變小。你也可以使用像素來代替像'width:1024px;'這樣的% – user2771704