Question

我仍然是相对较新的html，除了布局如何工作外，似乎很好地理解了一切。我希望左边的文字和右边的图像，但出于某种原因，左右浮动的工作＆gt;

以下是我正在使用的代码：

HTML：

`

<resources>

    <style name="FreeWallTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyActionBarTheme</item>

    </style>

    <style name="MyActionBarTheme" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">@color/action_bar</item>
        <item name="android:titleTextStyle">@style/TitleTextStyle</item>
    </style>

    <style name="TitleTextStyle" parent="android:TextAppearance.Holo.Widget.ActionBar.Title">
        <item name="android:textColor">@color/action_bar_title</item>
    </style>

</resources>

CSS：

  <!DOCTYPE html>
     <html>
     <head>

    <link rel = "stylesheet" type = "text/css" href = "glitch.css">
    <title> Data Bending </title>
    </head>
    <body>
    <header class = "horse" > Glitch Horse </header>
    <div class = "textContainer">

      <p>
        Horses' anatomy enables them to make use of speed to escape predators
        and they have a well-developed sense of balance and a strong fight-or-       flight
        response. Related to this need to flee from predators in the wild is an unusual
        trait: horses are able to sleep both standing up and lying down. Female horses,
        called mares, carry their young for approximately 11 months, and a young horse,
        called a foal, can stand and run shortly following birth. Most domesticated horses
        begin training under saddle or in harness between the ages of two and four. They
        reach full adult development by age five, and have an average lifespan of between 25
        and 30 years.

        </p>

        <div class = "imageContainer">
          <img src="city.png" style = "width: 300px; height:250px" >
        </div>

        </div>
              <input  type = "button" name = "button1" value = " View Glitch Horse">

      <div class = "padding"></div>


      <div class = "padding">  </div>

      <div>

      </body>

      </html>

Answer 1

将浮动设置为相同的值（左侧或右侧）并确保其宽度不超过100％。

＆＃13;

.left, .right {
  position:relative;
  width:20%;
  height:100px;
  background-color:red;
  float:left;
}

.right {
  background-color:blue;
  width:80%;
}

＆＃13;

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

＆＃13;

Answer 2

你不需要在div上使用float只需使用 -

 .imageContainer{

   float:right;
   width:20%;
  }

Answer 3

试试这个：

＆＃13;

.main-container{width: 100%; float: left;}

	.horse{
  background-color: #f3f3f3;
    padding-top: 10px;
    max-width: 900px;
    width: 100%;
    text-align: center;

}

.textContainer{

  float:left;
  width : 75%;
  height: 120px;

}

.imageContainer{

  float:right;
  width:20%;
}

p{

  background-color: #fff;
  width: 900px;
  height: 100px;
  float left:

}

.padding{

    padding-top: 10px;
    padding-bottom: 10px ;

}

＆＃13;

<!DOCTYPE html>
     <html>
  <head>
    <link rel = "stylesheet" type = "text/css" href = "glitch.css">
    <title> Data Bending </title>
    </head>
    <body>
	    <div class="main-container">
	    	<header class = "horse" > Glitch Horse </header>
		    <div class = "textContainer">
		      	<p>
		        Horses' anatomy enables them to make use of speed to escape predators
		        and they have a well-developed sense of balance and a strong fight-or-       flight
		        response. Related to this need to flee from predators in the wild is an unusual
		        trait: horses are able to sleep both standing up and lying down. Female horses,
		        called mares, carry their young for approximately 11 months, and a young horse,
		        called a foal, can stand and run shortly following birth. Most domesticated horses
		        begin training under saddle or in harness between the ages of two and four. They
		        reach full adult development by age five, and have an average lifespan of between 25
		        and 30 years.</p>
		        <input  type = "button" name = "button1" value = " View Glitch Horse">
		    </div>
		    <div class = "imageContainer">
		      <img src="city.png" style = "width: 300px; height:250px" >
		    </div>
		</div>
    </body>
</html>

＆＃13;

Answer 4

这里存在的问题是因为以下几段代码。

p{
  width: 900px;
}

和

<img src="city.png" style = "width: 300px; height:250px" >

浮点数工作得很好但是这两行代码覆盖了父级的宽度，因此div textContainer和imgContainer不能连续排列。

不能让我的两个div并排浮动

4 个答案: