problem_of_float.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Parent Float - Problem</title>
  5. <style type="text/css">
  6. body {
  7. width: 752px;
  8. font-family: Arial, Verdana, sans-serif;
  9. color: #665544;
  10. }
  11. /* CSS hack */
  12. /* 问题:因为p标签的浮动边框会变成一条线 */
  13. .container {
  14. border: 1px solid #665544;
  15. overflow: auto;
  16. }
  17. p {
  18. width: 230px;
  19. float: left;
  20. margin: 10px;
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <h1>The Evolution of the Bicycle</h1>
  26. <div class="container">
  27. <p>
  28. In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.
  29. </p>
  30. <p>
  31. The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the
  32. ground in a gliding movement.
  33. </p>
  34. <p>
  35. It was not seen a suitable for any place other than a well maintained pathway.
  36. </p>
  37. <p class="clear">
  38. In 1865, the velocipede (meaning "fast foot") attached pedals to the front wheel, but its wooden
  39. structure made it extremely uncomfortable.
  40. </p>
  41. <p>
  42. In 1870 the first all-metal machine appeared. The pedals were attached directly to the front wheel.
  43. </p>
  44. <p>
  45. Solid rubber tires and the long spokes of the large front wheel provided a much smoother ride than its
  46. predecessor.
  47. </p>
  48. <p>
  49. In 1817 Baron von Drais invented a walking machine that would help him get around the royal gardens faster.
  50. </p>
  51. <p>
  52. The device know as the Draisienne (or "hobby horse") was made of wood, and propelled by pushing your feed on the
  53. ground in a gliding movement.
  54. </p>
  55. <!-- <div style="clear: both;"></div> -->
  56. </div>
  57. </body>
  58. </html>