試圖通過側放置DIV的一面，但它不工作

這裏是我的代碼：試圖通過側放置DIV的一面，但它不工作

<div class="large-6 columns"> 
     <div id='box1'> 
     <div id='text1'> 
       Name 
     </div> 
     <div id='text3'> 
       LastName 
     </div> 
    </div> 
</div>

CSS是這樣的：

#box1 { 
    float: left; 
    height: 125px; 
    margin-top: 30px; 
    margin-bottom: 30px; 
    clear: none; 
    width: 125px; 
    border-top-left-radius: 95px; 
    border-top-right-radius: 95px; 
    border-bottom-right-radius: 95px; 
    border-bottom-left-radius: 95px; 
    background-color: rgb(232, 68, 58); 
    position:relative; 
    overflow:visible; 
} 
#text1 { 
    float: left; 
    font-size: 1em; 
    color: rgb(255, 255, 255); 
    width: 28%; 
    height: auto; 
    text-align: right; 
    font-weight: 400; 
    line-height: 1em; 
    word-wrap: break-word; 
    margin-left: 69.6%; 
    margin-top: 53px; 
    clear: none; 
    min-height: 0px; 
    min-width: 0.5em; 
    font-family: snippet; 
    overflow:auto; 
} 
#text3 { 
    float: left; 
    font-size: 1em; 
    color: rgb(0, 0, 0); 
    width: 72%; 
    height: auto; 
    text-align: right; 
    font-weight: 400; 
    line-height: 1em; 
    margin-left: 125px; 
    margin-top: 0px; 
    clear: none; 
    min-height: 0px; 
    min-width: 0.5em; 
    font-family: snippet; 
    position:relative; 
    overflow:visible; 
}

現在，這不是給我需要的結果。文本-3實際上應該出現在文本-1旁邊。但不知怎的，它包裝到下一個齒。

btw。我正在使用Zurb基金會代碼。在現有的CSS樣式上編寫我的自定義類。

編輯：雖然我解決了這個問題，但爲了讓你們中的一些人清楚起見，文本-1在圓圈內並且與圓圈的邊緣對齊。文本3位於圓圈之外並左對齊圓圈的邊緣。這樣，兩個文本，彼此相鄰，一個在圈內，一個在外。

來源

2013-04-26 ssdesign

不是重複的，因爲如果你看看我的代碼，其他答案提示的其他答案已經由我（它在我的代碼中）試過了。仍然沒有在我的情況下工作。在發佈之前，我做了很多線程搜索。 – ssdesign 2013-04-26 18:09:41

爲什麼不使用本機基礎架構來做到這一點？只是好奇。 – vtacreative 2013-04-26 18:12:41

好吧，浮動和內聯解決了我的問題，但我很想知道如何與基礎架構做到這一點。我今天剛從基礎開始。 – ssdesign 2013-04-26 18:15:24

是否有一個原因，你將margin-left添加到每個div？清理它一點，它似乎工作。

#text1 { 
    min-width: 0.5em; 
    width: 28%; 
    color: white; 
} 

#text3 { 
    min-width: 0.5em; 
    width: 72%; 
    color: black; 
} 

.inner-box { 
    float: left; 
    margin-top: 53px; 
    text-align: right; 
    font-weight: 400; 
    font-size: 1em; 
    line-height: 1em; 
}

http://jsfiddle.net/ferne97/8FzN5/1/

想想也是針對在每個內部DIV得到重複所有的代碼創建一個可重複使用的類。

來源

2013-04-26 18:22:47 ferne97

http://jsfiddle.net/tahdhaze09/7FM82/

CSS：

#box1 
{ 
    width:980px; 
    float:left; 
} 
#text1{ 
    width:450px; 
    float:left; 
    background-color:#45e64c; 
} 
#text3{ 
    width:400px; 
    float:left; 
    background-color:#edc321; 
}

HTML：

<div class="large-6 columns"> 
     <div id='box1'> 
     <div id='text1'> 
       Name 
     </div> 
     <div id='text3'> 
       LastName 
     </div> 
    </div> 
</div>

文本框，相映成趣。爲了簡單起見，我忽略了其他CSS。

來源

2013-04-26 18:30:58 tahdhaze09

下面是如何與基金會的原始架構做到這一點：

<div class="large-6 columns"> 
    <p>Some content</p> 
</div> 

<div class="large-6 columns"> 
    <p>Some more content</p> 
</div>

這會給你兩個容器，並排側，跨越960像素的全寬。

來源

2013-04-26 18:34:08 vtacreative

其實如果你看到我的代碼，他們需要重疊div的。這就是爲什麼我必須定製CSS我想重疊的Div。有一個圓圈，其中一個文字位於圓圈內部，另一個位於圓圈內部。不確定基礎列是否可以重疊。 – ssdesign 2013-04-26 19:44:07

我試過了W3C學校的代碼 try it editor。你的問題並沒有真正描述你期望看到什麼。當然，「姓名」和「姓氏」在彼此旁邊。但在圈內？在它的左邊？

我會推薦嘗試一下W3C的試用它編輯器的CSS，並邊緣（margin-top，margin-left）和寬度。建議先從上述css中完全刪除邊距和寬度，然後逐個添加一個。當然，請檢查試用編輯器，瞭解每個邊距/寬度添加引起的更改。

來源

2013-04-26 18:37:37 vvs

試圖通過側放置DIV的一面，但它不工作

回答

相關問題