2

こんにちはみんな、何らかの理由で私のテキストが折り返されていませんDiv、私は3つのdivを配置inline-blockしfloating leftました。フローティング左を使用しない場合、divは押し下げられます。

CSSコード

#OuterSection
{
border-top: 10px solid #0272b0;
border-left: 5px solid #0272b0;
border-bottom: 5px solid #0272b0;
border-right: 5px solid #0272b0;
border-radius: 10px;
background-color: #0272b0;
width:250px;
height: auto;
display:inline-block;
}

#InnerSection
{
width:auto;
height:auto;
text-align:center;
background-color: #FFF;
border-radius: 5px;   
text-align:left;
word-wrap: break-word;
float:left;
}

#SectionTitle
{
color: #FFF;
display: inline-block;
font-weight: bold;
margin-bottom: 5px;

}

ここにHTMLコード

<div id="OuterSection">
<span id="SectionTitle">section1</span>
<div id="InnerSection">

 testtesttesttesttesttesttesttesttesttesttesttest

</div>
</div>

<div id="OuterSection">
<span id="SectionTitle">section2</span>
<div id="InnerSection">

</div>
</div>

<div id="OuterSection">
<span id="SectionTitle">section3</span>
<div id="InnerSection"></div></div>
4

2 に答える 2

1

#Section{display:inline-block;}

于 2012-05-20T09:53:58.947 に答える
0

修正はここにあります: DEMO

word-wrap:break-word;innerSection で使用width:100%;

于 2012-05-20T11:28:04.210 に答える