Skip to content

Commit 358cfdc

Browse files
docs(layout): update css-utilities to show float properly (#2808)
closes #265
1 parent f623fc9 commit 358cfdc

File tree

1 file changed

+30
-10
lines changed

1 file changed

+30
-10
lines changed

Diff for: docs/layout/css-utilities.md

+30-10
Original file line numberDiff line numberDiff line change
@@ -134,17 +134,37 @@ The float CSS property specifies that an element should be placed along the left
134134
```html
135135
<ion-grid>
136136
<ion-row>
137-
<ion-col class="ion-float-left">
138-
<div>
139-
<h3>float-left</h3>
140-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
141-
</div>
137+
<ion-col>
138+
<h3>no float</h3>
139+
<img
140+
alt="Silhouette of a person's head"
141+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
142+
height="50px"
143+
/>
144+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
145+
vehicula lorem.
142146
</ion-col>
143-
<ion-col class="ion-float-right">
144-
<div>
145-
<h3>float-right</h3>
146-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac vehicula lorem.
147-
</div>
147+
<ion-col>
148+
<h3>float-left</h3>
149+
<img
150+
alt="Silhouette of a person's head"
151+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
152+
height="50px"
153+
class="ion-float-left"
154+
/>
155+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
156+
vehicula lorem.
157+
</ion-col>
158+
<ion-col>
159+
<h3>float-right</h3>
160+
<img
161+
alt="Silhouette of a person's head"
162+
src="https://ionicframework.com/docs/img/demos/avatar.svg"
163+
height="50px"
164+
class="ion-float-right"
165+
/>
166+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac
167+
vehicula lorem.
148168
</ion-col>
149169
</ion-row>
150170
</ion-grid>

0 commit comments

Comments
 (0)