Problem z ustawieniem szerokości

[TiREX69]

Witam mam problem z ustawieniem szerokości.

Mianowicie, gdy nie ustawiam szerokośći tekst wygląda tak: http://scr.hu/94b/3yoxy

ale gdy ustawiam width: 100% tekst wygląda troche inaczej: http://scr.hu/94b/elcwt

 

w pierwszym przykładzie było by wszystko OK, gdyby nie to, że gdy tekst jest za długi nie jest on łamany.

Dopiero gdy zrobie width:100% tekst się łamie.

 

Mój styl:

.bet {
	width:100%;
	color:#000;
	background:#eee;
	margin-top:1%;
}

.bet img {
	display:table-cell;
	vertical-align: middle;
	display:inline-block;
	width:128px;
	height:128px;
	margin:0;
	padding:0;
}

.bet .description {
	display:inline-block;
	vertical-align: middle;
}

Mój kod HTML:

<div class="bet">
							<img src="avatar.png">
							<div class="description">
								<p style="font-size:1.2rem;line-height:1.5rem;">恐龙 Szymon</p>
								<p>2 items</p>
								<p>0.5$</p>
								<p>100% chance</p>
							</div>
						</div>

 

[Salur]

Witam,

 

Łap poprawione.

<style>
.bet {
    width: 100%;
    color: #000;
    background: #eee;
    margin-top: 1%;
}

.bet img {
    vertical-align: middle;
    width: 128px;
    height: 128px;
    border: none;
    float: left;
}

.bet .description {
    width: 100%;
    vertical-align: middle;
}
</style>

<div class="bet">
	<img src="avatar.png">
		<div class="description">
			<p style="font-size:1.2rem;line-height:1.5rem;">恐龙 Szymon</p>
			<p>2 items</p>
			<p>0.5$</p>
			<p>100% chance</p>
		</div>
</div>

Pozdrawiam.

[TiREX69]

Witam,

 

Łap poprawione.

<style>
.bet {
    width: 100%;
    color: #000;
    background: #eee;
    margin-top: 1%;
}

.bet img {
    vertical-align: middle;
    width: 128px;
    height: 128px;
    border: none;
    float: left;
}

.bet .description {
    width: 100%;
    vertical-align: middle;
}
</style>

<div class="bet">
	<img src="avatar.png">
		<div class="description">
			<p style="font-size:1.2rem;line-height:1.5rem;">恐龙 Szymon</p>
			<p>2 items</p>
			<p>0.5$</p>
			<p>100% chance</p>
		</div>
</div>

Pozdrawiam.

 

Dzięki za pomoc, ale mam pewien problem, gdyż przez ustawienie float:left nie dostosowuje mi sie wysokosc okna do wysokosci obrazka i nei wyglada to za fajnie: http://scr.hu/94b/o2gy6

 

­

[Salur]

Ustaw dla .description height: 128px czyli takie jak ma obrazek.

[TiREX69]

Ustaw dla .description height: 128px czyli takie jak ma obrazek.

 

Wyeliminuje to wtedy lekką responsywność, gdyż tekst będzie się pokazywać pod prostokątem.

­

[Jakub]

<div class="bet">
	<img src="avatar.png">
		<div class="description">
			<p style="font-size:1.2rem;line-height:1.5rem;">恐龙 Szymon</p>
			<p>2 items</p>
			<p>0.5$</p>
			<p>100% chance</p>
		</div>
</div>

zamień na

<div class="bet">
	<img src="avatar.png">
		<div class="description">
			<p style="font-size:1.2rem;line-height:1.5rem;">恐龙 Szymon</p>
			<p>2 items</p>
			<p>0.5$</p>
			<p>100% chance</p>
		</div>
<div style="clear: both;"></div>
</div>

i kontener będzie maił taką samą wysokość jak obrazek.

[TiREX69]

<div class="bet">
	<img src="avatar.png">
		<div class="description">
			<p style="font-size:1.2rem;line-height:1.5rem;">恐龙 Szymon</p>
			<p>2 items</p>
			<p>0.5$</p>
			<p>100% chance</p>
		</div>
</div>

zamień na

<div class="bet">
	<img src="avatar.png">
		<div class="description">
			<p style="font-size:1.2rem;line-height:1.5rem;">恐龙 Szymon</p>
			<p>2 items</p>
			<p>0.5$</p>
			<p>100% chance</p>
		</div>
<div style="clear: both;"></div>
</div>

i kontener będzie maił taką samą wysokość jak obrazek.

 

 

Dzięki już naprawiłem, kolega wyżej dał mi sposób na załamywanie linii

­