添加文字後，div不會內聯

爲什麼在向內嵌div內的內容div添加文本後div不內聯？這是一個錯誤嗎？在這裏我添加了我的代碼。我試着用jfiddle。但還沒有解決方案。添加文字後，div不會內聯

<div style="display:block"> 
<div style="width:230px; color:#000; background-color:#EAEAEA; border-radius:6px;display:inline-block; "> 
    <div style="text-transform:uppercase;font-size:14px;color:#000000;text-align:center;background-color:#FFFFFF;margin-top:6px;padding:5px;" class="font"> 
     Colombo City 
    </div> 
    <div style="width:202px;height:202px;background-image:url(images/colombo.png);margin:14px;"> 
    </div> 
    <div style="margin:14px;word-wrap:break-word;width:202px;height:200px;background-color:#0099CC;"> 
     add more textadd more textadd more textadd more textadd more textadd more text 
    </div> 
</div> 
<div style="width:230px; color:#000; background-color:#EAEAEA; border-radius:6px; display:inline-block;margin-left:3px; "> 
    <div style="text-transform:uppercase;font-size:14px;color:#000000;text-align:center;background-color:#FFFFFF;margin-top:6px;padding:5px;" class="font"> 
     Great Sigiriya 
    </div> 
    <div style="width:202px;height:202px;background-image:url(images/sigiriya.png);margin:14px;"> 
    </div> 
    <div style="margin:14px;word-wrap:break-word;width:202px;height:200px;background-color:#0099CC;"> 
     Colombo 
    </div> 
</div> 
<div style="width:230px; color:#000; background-color:#EAEAEA; border-radius:6px;display:inline-block;margin-left:3px; "> 
    <div style="text-transform:uppercase;font-size:14px;color:#000000;text-align:center;background-color:#FFFFFF;margin-top:6px;padding:5px;" class="font"> 
     YALA National Park 
    </div> 
    <div style="width:202px;height:202px;background-image:url(images/hillcountry.png);margin:14px;"> 
    </div> 
    <div style="margin:14px;word-wrap:break-word;width:202px;height:200px;background-color:#0099CC;"> 
     Colombo 
    </div> 
</div> 
<div style="width:230px; color:#000; background-color:#EAEAEA; border-radius:6px; display:inline-block;margin-left:3px;"> 
    <div style="text-transform:uppercase;font-size:14px;color:#000000;text-align:center;background-color:#FFFFFF;margin-top:6px;padding:5px;" class="font"> 
     Arts & Crafts 
    </div> 
    <div style="width:202px;height:202px;background-image:url(images/crafts.png);margin:14px;"> 
    </div> 
    <div style="margin:14px;word-wrap:break-word;width:202px;height:200px;background-color:#0099CC;"> 
     Colombo 
    </div> 
</div> 
</div>

來源

2013-02-25 Ishani702

http://jsfiddle.net/ KABHH/ 這裏是從 – Ishani702 2013-02-25 13:41:00

ew。爲什麼不使用CSS？除此之外，問題究竟是什麼？你有沒有給容器足夠的寬度來實際適合你所有的元素？ http://jsfiddle.net/KABHH/1/ – thescientist 2013-02-25 13:44:49

使用CSS樣式表，這是可讀的。不是說它必須對你的問題做任何事情，但它給你一個更好的觀點，然後內聯樣式 – 2013-02-25 13:45:13

不要使用inline-block每一個div的只是float他們。它會爲你做。

<div style="display:inline-block"> 
    <div class="mainsquare"> 
    <div class="font titlesquare">Colombo City</div> 
    <div class="imagesquare1"></div> 
    <div class="contentsquare">Colombo Colombo Colombo Colombo Colombo Colombo Colombo Colombo Colombo Colombo Colombo </div> 
    </div> 

    <div class="mainsquare left"> 
    <div class="font titlesquare">Great Sigiriya</div> 
    <div class="imagesquare2"></div> 
    <div class="contentsquare">Colombo </div> 
    </div> 

    <div class="mainsquare left"> 
    <div class="font titlesquare">Colombo City</div> 
    <div class="imagesquare1"></div> 
    <div class="contentsquare">Colombo </div> 
    </div> 

    <div class="mainsquare left"> 
    <div class="font titlesquare">Great Sigiriya</div> 
    <div class="imagesquare2"></div> 
    <div class="contentsquare">Colombo</div> 
    </div> 
    </div>

和CSS

.mainsquare{ 
width:230px; color:#000; background-color:#EAEAEA; border-radius:6px; 
float:left; 
} 
.titlesquare{ 
    text-transform:uppercase;font-size:14px;color:#000000;text-align:center; 
    background-color:#FFFFFF;margin-top:6px;padding:5px; 
} 

.contentsquare{ 
    margin:14px;word-wrap:break-word;width:202px;height:200px; 
    background-color:#0099CC; 
} 

.imagesquare1{ 
    width:202px;height:202px;background-image:url(../images/colombo.png); 
    margin:14px; 
} 

.imagesquare2{ 
    width:202px;height:202px;background-image:url(../images/sigiriya.png); 
    margin:14px; 
} 

.imagesquare3{ 
    width:202px;height:202px;background-image:url(../images/hillcountry.png); 
    margin:14px; 
} 

.imagesquare4{ 
    width:202px;height:202px;background-image:url(../images/crafts.png); 
    margin:14px; 
} 
.left{ 
    margin-left:3px; 
} 
}

看看這個Fiddle。

提示

你不應該一次又一次地使用內聯CSS的相同的CSS。做一個CSS類，並調用它在任何你想

來源

2013-02-25 14:02:19

謝謝。它很好！ – Ishani702 2013-02-25 14:09:27

你有沒有嘗試做

<div style="text-transform:uppercase;font-size:14px;color:#000000;text-align:center;background-color:#FFFFFF;margin-top:6px;padding:5px; display:inline;" class="font">Colombo City</div>

？似乎你想要這些div內聯，所以爲什麼他們沒有那種風格？除了最佳woud是 <div style="text-transform:uppercase;font-size:14px;color:#000000;text-align:center;background-color:#FFFFFF;margin-top:6px;padding:5px; float:left;" class="font">Colombo City</div>

來源

2013-02-25 13:47:04

float left didtnt work .. – Ishani702 2013-02-25 14:01:07

你的問題是，默認情況下，CSS display屬性不是繼承屬性（即display: inline-block不會向下繼承到子元素）。

如果要設置父顯示器和繼承的孩子，那麼你需要添加：

display: inherit;

對孩子的div。

來源

2013-02-25 13:49:59 War10ck

如果我正確理解你的問題，你可以嘗試在你的div上使用下面的代碼。

float: left;

我也建議使用樣式表而不是可怕的內聯樣式。

來源

2013-02-25 13:52:05

謝謝。它很好！ – Ishani702 2013-02-25 14:09:57

他們不會'內聯'..他們是塊。 只需將它們浮起左邊將強制em迴流。

來源

2013-02-25 13:52:28

jsfiddle here：http://jsfiddle.net/KABHH/3/ – 2013-02-25 13:55:24

我添加float: left到您的第二個div：

<div style="width:230px; color:#000; background-color:#EAEAEA; border-radius:6px;display:inline-block;float:left ">

，他們列隊！

Fiddle

來源

2013-02-25 13:53:32

我同意你來到這裏2點很好的建議：（1）使用花車; （2）使用樣式表。

但只是讓你知道爲什麼它不對齊，你需要添加：

vertical-align: top

到是inline-block的每一格。原因是高度不一。在這裏閱讀更多：http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

小提琴這裏：http://jsfiddle.net/QKNg8/1/

來源

2013-02-25 13:57:48

添加vertical-align: top;到主DIV內的四個div S的每一個（第一個，<div style="display:block">）

來源

2013-02-25 14:04:07

添加文字後，div不會內聯

回答

相關問題