Question

我试图将这个文本包装在图像周围，我尝试的所有内容似乎都不起作用。

    #main-border {
    text-align: center;
    background : url(../desktop/background.gif);
    background-size : 100% 100%;
    height: 700px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;

    }


    #main-border p {
	position: relative;
	margin: 50px;
    }

<div id="main-border">
 	<img src="../desktop/atitlan.jpg" width="300px" class="wrap">
     <p>Paris (UK: /ˈpærɪs/; US: Listeni/ˈpɛərɪs/; French: [paʁi] ( listen)) is the capital and most populous city of France. Situated on the Seine River, in the north of the country, it is in the center of the Île-de-France region, also known as the région parisienne. The City of Paris has a population of 2,249,975 inhabitants (January 2011), making it the fifth largest city in the European Union measured by the population within the city limits. Paris and its suburbs have a population of 12,292,895 inhabitants, making it the second or third largest metropolitan area in Europe, with London and Berlin, depending on the area measured.</p>

    <p>Paris was founded in the 3rd century BC by a Celtic people called the Parisii, who gave the city its name. By the 12th century, Paris was the largest city in the western world, a prosperous trading centre, and the home of the University of Paris, one of the first in Europe. In the eighteenth century, it was the centre stage for the French Revolution, and became an important centre of finance, commerce, fashion, science, and the arts, a position it still retains today.</p>

</div>

Answer 1

只需将float: left添加到img代码

即可

#main-border{
   overflow: hidden; //to clear the float (instead of clearfix)
}

img{
   float: left;
   margin: 0 10px 10px 0;
}

FIDDLE

使用您的代码：

#main-border {
  text-align: center;
  background : url(../desktop/background.gif);
  background-size : 100% 100%;
  height: 700px;
  width: 600px;
  margin-left: auto;
  margin-right: auto; 
  overflow: hidden; //to clear the float (instead of clearfix)
}

#main-border img.wrap{
    float: left;
    margin: 0 10px 10px 0; //adds some spacing
}

YOUR CODE

Answer 2

＆＃13;

    #main-border {
    text-align: center;
    background : url(../desktop/background.gif);
    background-size : 100% 100%;
    height: 700px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;

    }


    #main-border p {
	position: relative;
	margin: 50px;
    }
.wrap{float:left;}

＆＃13;

<div id="main-border">
 	<img src="../desktop/atitlan.jpg" width="300px" class="wrap">
     <p>Paris (UK: /ˈpærɪs/; US: Listeni/ˈpɛərɪs/; French: [paʁi] ( listen)) is the capital and most populous city of France. Situated on the Seine River, in the north of the country, it is in the center of the Île-de-France region, also known as the région parisienne. The City of Paris has a population of 2,249,975 inhabitants (January 2011), making it the fifth largest city in the European Union measured by the population within the city limits. Paris and its suburbs have a population of 12,292,895 inhabitants, making it the second or third largest metropolitan area in Europe, with London and Berlin, depending on the area measured.</p>

    <p>Paris was founded in the 3rd century BC by a Celtic people called the Parisii, who gave the city its name. By the 12th century, Paris was the largest city in the western world, a prosperous trading centre, and the home of the University of Paris, one of the first in Europe. In the eighteenth century, it was the centre stage for the French Revolution, and became an important centre of finance, commerce, fashion, science, and the arts, a position it still retains today.</p>

</div>

＆＃13;

Answer 3

请参阅fiddle

添加

.wrap{
    float: left;
}

到 CSS

Answer 4

嗨，这里是让你的文字环绕图像的代码。 http://codepen.io/dfrierson2/pen/RNoWZe

#main-border {
    text-align: justified;
    background : url(../desktop/background.gif);
    height: 700px;
    width: 600px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid red;
    overflow: hidden;

    }


#main-border img {
  float: left;
  padding: 10px;

}


    #main-border p {
    position: relative;
    margin: 50px;

    }

<div id="main-border">
    <img src="../desktop/atitlan.jpg" width="300px" class="wrap">
     <p>Paris (UK: /ˈpærɪs/; US: Listeni/ˈpɛərɪs/; French: [paʁi] ( listen)) is the capital and most populous city of France. Situated on the Seine River, in the north of the country, it is in the center of the Île-de-France region, also known as the région parisienne. The City of Paris has a population of 2,249,975 inhabitants (January 2011), making it the fifth largest city in the European Union measured by the population within the city limits. Paris and its suburbs have a population of 12,292,895 inhabitants, making it the second or third largest metropolitan area in Europe, with London and Berlin, depending on the area measured.</p>

    <p>Paris was founded in the 3rd century BC by a Celtic people called the Parisii, who gave the city its name. By the 12th century, Paris was the largest city in the western world, a prosperous trading centre, and the home of the University of Paris, one of the first in Europe. In the eighteenth century, it was the centre stage for the French Revolution, and became an important centre of finance, commerce, fashion, science, and the arts, a position it still retains today.</p>

</div>

在HTML和CSS中围绕图像环绕文本

4 个答案:

请参阅fiddle