Doc: Used div elements for floats, updated the style sheet.

11 files changed, 68 insertions, 21 deletions

diff --git a/doc/src/declarative/positioners.qdoc b/doc/src/declarative/positioners.qdoc
index ed320a1228..d97acbde5c 100644
--- a/doc/src/declarative/positioners.qdoc
+++ b/doc/src/declarative/positioners.qdoc
@@ -53,7 +53,9 @@ graphical elements:
 
 \section2 Column
 
-\floatright qml-column.png
+\div{float-right}
+\inlineimage qml-column.png
+\enddiv
 
 \l Column items are used to vertically arrange items. The following example
 uses a Column item to arrange three \l Rectangle items in an area defined
@@ -68,7 +70,9 @@ must be added to a parent Rectangle, if desired.
 
 \section2 Row
 
-\floatright qml-row.png
+\div{float-right}
+\inlineimage qml-row.png
+\enddiv
 
 \l Row items are used to horizontally arrange items. The following example
 uses a Row item to arrange three rounded \l Rectangle items in an area defined
@@ -83,7 +87,9 @@ left around the edges of the horizontally centered Row item.
 
 \section2 Grid
 
-\floatright qml-grid-spacing.png
+\div{float-right}
+\inlineimage qml-grid-spacing.png
+\enddiv
 
 \l Grid items are used to place items in a grid or table arrangement.
 The following example uses a Grid item to place four \l Rectangle items
@@ -102,8 +108,10 @@ at the appropriate places in the Grid definition.
 
 \section2 Flow
 
-\floatright qml-flow-text1.png
-\floatright qml-flow-text2.png
+\div{float-right}
+\inlineimage qml-flow-text1.png
+\inlineimage qml-flow-text2.png
+\enddiv
 
 \l Flow items are used to place items like words on a page, with rows or
 columns of non-overlapping items.
@@ -129,7 +137,9 @@ control of spacing between items and between lines of items.
 
 \section1 Repeaters
 
-\floatright qml-repeater-grid-index.png
+\div{float-right}
+\inlineimage qml-repeater-grid-index.png
+\enddiv
 
 Repeaters create items from a template for use with positioners, using data
 from a model. Combining repeaters and positioners is an easy way to lay out
diff --git a/doc/src/declarative/qdeclarativemodels.qdoc b/doc/src/declarative/qdeclarativemodels.qdoc
index a61b115e05..495b3bd99e 100644
--- a/doc/src/declarative/qdeclarativemodels.qdoc
+++ b/doc/src/declarative/qdeclarativemodels.qdoc
@@ -504,7 +504,9 @@ a Web browser.
 \l ListView shows a classic list of items with horizontal or vertical placing
 of items.
 
-\floatright qml-listview-snippet.png
+\div{float-right}
+\inlineimage qml-listview-snippet.png
+\enddiv
 
 The following example shows a minimal ListView displaying a sequence of
 numbers (using an \l{QML Data Models#An Integer}{integer as a model}).
diff --git a/doc/src/getting-started/how-to-learn-qt.qdoc b/doc/src/getting-started/how-to-learn-qt.qdoc
index e5f1ff9186..0d5fd0a98a 100644
--- a/doc/src/getting-started/how-to-learn-qt.qdoc
+++ b/doc/src/getting-started/how-to-learn-qt.qdoc
@@ -51,7 +51,9 @@
     key overviews to deepen your understanding of Qt: The Qt \l{Object
     Model} and \l{Signals and Slots}.
 
-    \floatleft qtdemo-small.png
+    \div{float-left}
+    \inlineimage qtdemo-small.png
+    \enddiv
 
     \section1 Getting an Overview
 
diff --git a/doc/src/template/style/style.css b/doc/src/template/style/style.css
index 04d8c05c15..d623bd49d9 100755
--- a/doc/src/template/style/style.css
+++ b/doc/src/template/style/style.css
@@ -176,7 +176,16 @@
     {
      /*   background-color: #E6E6E6;*/ /* disabled until further notice */
     }
-    		
+
+    div.float-left
+    {
+        float: left; margin-right: 2em
+    }
+    div.float-right
+    {
+        float: right; margin-left: 2em
+    }
+
     span.comment
     {
         color: #008B00;
diff --git a/doc/src/zh_CN/getting-started/how-to-learn-qt.qdoc b/doc/src/zh_CN/getting-started/how-to-learn-qt.qdoc
index 598cbea8cc..e74c84c5f1 100644
--- a/doc/src/zh_CN/getting-started/how-to-learn-qt.qdoc
+++ b/doc/src/zh_CN/getting-started/how-to-learn-qt.qdoc
@@ -41,7 +41,9 @@
 
     现在您已经编写了一些小型可用的应用程序，并对 Qt 编程有更加广泛的了解。您可以直接着手做自己的项目，但我们建议您阅读以下一些关键简介以加深您对 Qt 的了解：\l{Qt Object Model}Qt 对象模型}和\l{Signals and Slots}{信号和槽}。
 
-    \floatleft qtdemo-small.png
+    \div {float-left}
+    \inlineimage qtdemo-small.png
+    \enddiv
 
     \section1 了解概况
 
diff --git a/src/declarative/graphicsitems/qdeclarativeflickable.cpp b/src/declarative/graphicsitems/qdeclarativeflickable.cpp
index 1899a39bc3..cd770d4c21 100644
--- a/src/declarative/graphicsitems/qdeclarativeflickable.cpp
+++ b/src/declarative/graphicsitems/qdeclarativeflickable.cpp
@@ -373,7 +373,9 @@ void QDeclarativeFlickablePrivate::updateBeginningEnd()
 
     \section1 Example Usage
 
-    \floatright flickable.gif
+    \div {float-right}
+    \inlineimage flickable.gif
+    \enddiv
 
     The following example shows a small view onto a large image in which the
     user can drag or flick the image in order to view different parts of it.
diff --git a/src/declarative/graphicsitems/qdeclarativegridview.cpp b/src/declarative/graphicsitems/qdeclarativegridview.cpp
index c7517f476e..ba66abab8e 100644
--- a/src/declarative/graphicsitems/qdeclarativegridview.cpp
+++ b/src/declarative/graphicsitems/qdeclarativegridview.cpp
@@ -1095,7 +1095,9 @@ void QDeclarativeGridViewPrivate::flick(AxisData &data, qreal minExtent, qreal m
 
     \snippet doc/src/snippets/declarative/gridview/ContactModel.qml 0
 
-    \floatright gridview-simple.png
+    \div {float-right}
+    \inlineimage gridview-simple.png
+    \enddiv
 
     This model can be referenced as \c ContactModel in other QML files. See \l{QML Modules}
     for more information about creating reusable components like this.
diff --git a/src/declarative/graphicsitems/qdeclarativemousearea.cpp b/src/declarative/graphicsitems/qdeclarativemousearea.cpp
index 56e5c6b1fe..3d5c29f76e 100644
--- a/src/declarative/graphicsitems/qdeclarativemousearea.cpp
+++ b/src/declarative/graphicsitems/qdeclarativemousearea.cpp
@@ -216,7 +216,9 @@ QDeclarativeMouseAreaPrivate::~QDeclarativeMouseAreaPrivate()
 
     \section1 Example Usage
 
-    \floatright qml-mousearea-snippet.png
+    \div {float-right}
+    \inlineimage qml-mousearea-snippet.png
+    \enddiv
 
     The following example uses a MouseArea in a \l Rectangle that changes
     the \l Rectangle color to red when clicked:
diff --git a/src/declarative/graphicsitems/qdeclarativerectangle.cpp b/src/declarative/graphicsitems/qdeclarativerectangle.cpp
index 969027e22c..7bb6afb274 100644
--- a/src/declarative/graphicsitems/qdeclarativerectangle.cpp
+++ b/src/declarative/graphicsitems/qdeclarativerectangle.cpp
@@ -131,7 +131,9 @@ void QDeclarativeGradientStop::updateGradient()
 
     \section1 Example Usage
 
-    \floatright qml-gradient.png
+    \div {float-right}
+    \inlineimage qml-gradient.png
+    \enddiv
 
     The following example declares a \l Rectangle item with a gradient starting
     with red, blending to yellow at one third of the height of the rectangle,
@@ -215,7 +217,9 @@ void QDeclarativeGradient::doUpdate()
 
     \section1 Example Usage
 
-    \floatright declarative-rect.png
+    \div {float-right}
+    \inlineimage declarative-rect.png
+    \enddiv
 
     The following example shows the effects of some of the common properties on a
     Rectangle item, which in this case is used to create a square:
@@ -265,7 +269,9 @@ void QDeclarativeRectangle::doUpdate()
     rectangle (as documented for QRect rendering). This can cause unintended effects if
     \c border.width is 1 and the rectangle is \l{Item::clip}{clipped} by a parent item:
 
-    \floatright rect-border-width.png
+    \div {float-right}
+    \inlineimage rect-border-width.png
+    \enddiv
 
     \snippet doc/src/snippets/declarative/rectangle/rect-border-width.qml 0
 
@@ -287,7 +293,9 @@ QDeclarativePen *QDeclarativeRectangle::border()
     This property allows for the construction of simple vertical gradients.
     Other gradients may by formed by adding rotation to the rectangle.
 
-    \floatleft declarative-rect_gradient.png
+    \div {float-left}
+    \inlineimage declarative-rect_gradient.png
+    \enddiv
 
     \snippet doc/src/snippets/declarative/rectangle/rectangle-gradient.qml rectangles
     \clearfloat
@@ -353,7 +361,9 @@ void QDeclarativeRectangle::setRadius(qreal radius)
 
     The default color is white.
 
-    \floatright rect-color.png
+    \div {float-right}
+    \inlineimage rect-color.png
+    \enddiv
 
     The following example shows rectangles with colors specified
     using hexadecimal and named color notation:
diff --git a/src/declarative/util/qdeclarativelistmodel.cpp b/src/declarative/util/qdeclarativelistmodel.cpp
index 52e563bba0..0f117f5abb 100644
--- a/src/declarative/util/qdeclarativelistmodel.cpp
+++ b/src/declarative/util/qdeclarativelistmodel.cpp
@@ -108,7 +108,9 @@ QDeclarativeListModelParser::ListInstruction *QDeclarativeListModelParser::ListM
     The following example shows a ListModel containing three elements, with the roles
     "name" and "cost".
 
-    \floatright listmodel.png
+    \div {float-right}
+    \inlineimage listmodel.png
+    \enddiv
 
     \snippet doc/src/snippets/declarative/listmodel.qml 0
 
@@ -131,7 +133,9 @@ QDeclarativeListModelParser::ListInstruction *QDeclarativeListModelParser::ListM
 
     The delegate displays all the fruit attributes:
 
-    \floatright listmodel-nested.png
+    \div {float-right}
+    \inlineimage listmodel-nested.png
+    \enddiv
 
     \snippet doc/src/snippets/declarative/listmodel-nested.qml delegate
 
diff --git a/src/gui/graphicsview/qgraphicsanchorlayout.cpp b/src/gui/graphicsview/qgraphicsanchorlayout.cpp
index 1d1d257301..fe0ad868b4 100644
--- a/src/gui/graphicsview/qgraphicsanchorlayout.cpp
+++ b/src/gui/graphicsview/qgraphicsanchorlayout.cpp
@@ -56,7 +56,9 @@
     Items that are anchored are automatically added to the layout, and if items
     are removed, all their anchors will be automatically removed.
 
-    \figureleft{simpleanchorlayout-example.png}{Using an anchor layout to align simple colored widgets.}
+    \div {float-left}
+    \inlineimage simpleanchorlayout-example.png Using an anchor layout to align simple colored widgets.
+    \enddiv
 
     Anchors are always set up between edges of an item, where the "center" is also considered to
     be an edge. Consider the following example: