div裏面的空格

長時間以後，我完成了第一個html練習，完成了一個div，如果沒有這個真棒社區的支持，我不會這麼做。div裏面的空格

我現在唯一的問題是要避免集羣慌亂，這是我的社交媒體股利。我需要鏈接的尺寸更小，然後在imgs旁邊（空間爲c），現在它們有點偏離。

此外，通訊部分與其各自的IMG是緊貼社會的一個，並不想給它空間呼吸。

任何想法都會被深深的折磨！祝福

CSS代碼：

#contactUs{ 
position: absolute; 
margin: 20px 0 0 700px; 
} 


    #social p{ 
color: #404040; 
font-family: 'Quattrocento Sans', sans-serif; 
font-size: 14px; 
top: 5px; 
padding: 0 0 0 20px; 
line-height: 23px 
    } 

#social img{ 
float: left; 
} 

#social{ 
position: absolute; 
top: 15px; 
} 

#news{ 
color: #404040; 
font-family: 'Quattrocento Sans', sans-serif; 
font-size: 14px; 
bottom: 10px; 
}

和HTML：

<div id="contactUs"> 
     <h4 id="title4">GET IN TOUCH WITH US</h4> 
     <img src="imgs/social.png"> 
     <div id="social"> 
      <p><a href="#">Facebook</a></p> 
      <p><a href="#">Twitter</a></p> 
      <p><a href="#">Google+</a></p> 
     </div> 

     <h4 id="news">NEWSLETTER SIGNUP</h4> 
     <img src="imgs/email.png"> 
    </div>

值得注意的是這個div是正確的，2人現在正好是表現他們應該。另外我不能使用％。

來源

2014-03-06 Code Grasshopper

在問一個新問題之前，您應該首先接受之前對您顯然幫助過您的問題的所有回答。 –

我不知道如何關閉，我從來沒有用這種感謝告訴，每個人都得到應有的信譽。 –

太棒了！也許你可以提供一個jsfiddle來幫助我們更容易地看到你的問題是什麼？ –

你原來的代碼充斥着問題，所以它變得更容易，而不是創建一些新的代碼。

我立即看到的問題之一是您對ID屬性的不正確使用。 ID屬性是唯一的，這意味着您不能在頁面上爲同一個ID提供多個對象。如果您想將多個對象組合在一起，請改用class屬性。請記住，在您的CSS中，雖然ID表示爲#IDName，但類別表示爲.ClassName。作爲一個初學者，你可能會發現僅僅使用類來工作更容易，但是隨着頁面變得越來越大和越來越複雜，你會發現其中一個可能比另一個更有用。

現在，到你的實際代碼。我試圖重新創建您儘可能提供的截圖的佈局，但它缺少一些樣式，例如字體顏色。我會假設你可以自己修復，所以我可以專注於解釋更重要的事情。

<footer> 
    <div class="footColumn"> 
     <h4>24 HOUR CUSTOMER SERVICE</h4> 
     <div class="inner"> 
      <img src="imgs/icon-phone.png" class="left"> 
      <p class="offset">512-943-1069</p> 
      <p class="offset">512-943-1068</p> 
     </div> 
     <div class="inner"> 
      <img src="imgs/icon-email.png" class="left"> 
      <p class="offset"><a href="#">[email protected]</a></p> 
     </div> 
     <div class="inner"> 
      <img src="imgs/icon-address.png" class="left"> 
      <p class="offset">1341 Oakmound Drive</p> 
      <p class="offset">Chicago, IL 60609</p> 
     </div> 
    </div> 
    <div class="footColumn"> 
     <h4>RECENT TWEETS</h4> 
     <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
     <p><a href="#">- 1 day ago</a></p> 
     <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p> 
     <p><a href="#">- 2 days ago</a></p> 
    </div> 
    <div class="footColumn"> 
     <h4>GET IN TOUCH WITH US</h4> 
     <img src="imgs/social.png" class="left"> 
     <p class="offset"><a href="#">Facebook</a></p> 
     <p class="offset"><a href="#">Twitter</a></p> 
     <p class="offset"><a href="#">Google+</a></p> 
     <h4 class="news">NEWSLETTER SIGNUP</h4> 
     <img src="imgs/email.png"> 
    </div> 
</footer>

CSS：

footer{ 
    font-size:0; 
} 
.footColumn{ 
    display:inline-block; 
    width:33%; 
    font-size:12px; 
    vertical-align:top; 
} 
.footColumn h4{ 
    font-size:14px; 
} 
.offset{ 
    padding:0px 0px 0px 30px; 
    margin:0px 0px 10px; 
} 
.inner{ 
    padding:10px 0; 
} 
.left{ 
    float:left; 
}

Here's a Fiddle

從這裏，你應該能夠修補一下較小的款式，但讓我知道，如果你有任何問題。

來源

2014-03-06 18:48:27 Hiigaran

非常感謝！我沒有被允許使用％或footer的這種做法，但正如你所說我可以調整它！並感謝提示; D –

div裏面的空格

回答

相關問題