如何包装图像周围的内容?

时间:2017-01-19 23:23:09

标签: html css

我正在尝试为个人网站创建一个关于页面的页面。我想知道如何围绕图片包装文本。我想要这种效果。 http://alexbudak.com/about/

我现在的代码是:

 <div class="about_content">
            <img src="placeholder.jpg" alt="">
            <h2>The Brand</h2>
            </p>
            The Tailory New York is an appointment only custom clothing              company that combines the modernity of Fashion Design with the heritage art of Custom Tailoring. We are unique in that we cater to both the Men and Women market.
           </p>
            <h2>The Concept </h2>
                <p>
                    Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. At The Tailory New York, we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind. The end result?—clients get the best of both worlds, impeccable custom fit and custom designed pieces that works seamlessly with their lifestyle.
                </p>
            <h2>A Note From the Founder</h2>
                <p>
                    The idea for The Tailory New York began when I decided to direct my years of fashion design and men’s tailoring experience towards my own wardrobe. As a pant suit aficionado and a lover of men’s fashion and tailoring, I was always drawn to tailored clothing and strived to create fashion that conveyed the same message of confidence that a perfectly custom tailored suit did for men. Style icons like Sean Connery and Cary Grant, as well as modern day 007 Daniel Craig (shaken not stirred) were always my style inspirations. To me, they are the epitome of refinement and sophistication, true gentlemen in style.
                    My passion for fashion and tailoring led me through the Fashion Design program at Parsons followed by stints in custom tailoring, fashion design, fashion styling and brand development. But the more I integrated myself in the industry, the more I realized that impeccable fit, for men and women, was almost impossible to find in ready to wear clothing. So, I launched The Tailory New York, a way for me to combine my two passions, Fashion Design and Custom Tailoring. Everyone wants to look their best and having a wardrobe curated to your body and lifestyle not only enables you to look your best but makes you feel your best.
                    At The Tailory New York, “we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind.” Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. Let us curate and design the wardrobe fit for YOU! </br>
                    <br> </br>
                    Sincerely,</br>
                    Shao Yang, Founder 
                    <br> </br>
                </p> 
        </div>

和css是:

h2{
    margin: 0 0 1.2em 0;
    font-family: 'Raleway', 'sans-serif';
    font-weight: normal;
}

.about_content{
    width: 500px;
    overflow: hidden;
  }

.about_content img{
    margin-right: 15px;
    float: left;
}
.about_content p: last-child{
    margin-bottom: 0;
}

1 个答案:

答案 0 :(得分:0)

您现在拥有的内容将使内容环绕图像。这样做的诀窍是将float: left;应用于您已经完成的图像。

我怀疑正在发生的事情是你的形象太宽了。如果它的宽度为500像素或更宽,则图像将占据.about_content的整个宽度,因此您需要限制图像的大小。以下是在图片上使用max-width的示例。

&#13;
&#13;
h2{
    margin: 0 0 1.2em 0;
    font-family: 'Raleway', 'sans-serif';
    font-weight: normal;
}

.about_content{
    width: 500px;
    overflow: hidden;
  }

.about_content img{
    margin-right: 15px;
    float: left;
  max-width: 250px;
}
.about_content p: last-child{
    margin-bottom: 0;
}
&#13;
 <div class="about_content">
            <img src="https://static1.squarespace.com/static/541ff355e4b03f1e8815bc58/t/54b43e30e4b0ad2aad39a7f2/1421098552235/budak?format=500w" alt="">
            <h2>The Brand</h2>
            </p>
            The Tailory New York is an appointment only custom clothing              company that combines the modernity of Fashion Design with the heritage art of Custom Tailoring. We are unique in that we cater to both the Men and Women market.
           </p>
            <h2>The Concept </h2>
                <p>
                    Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. At The Tailory New York, we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind. The end result?—clients get the best of both worlds, impeccable custom fit and custom designed pieces that works seamlessly with their lifestyle.
                </p>
            <h2>A Note From the Founder</h2>
                <p>
                    The idea for The Tailory New York began when I decided to direct my years of fashion design and men’s tailoring experience towards my own wardrobe. As a pant suit aficionado and a lover of men’s fashion and tailoring, I was always drawn to tailored clothing and strived to create fashion that conveyed the same message of confidence that a perfectly custom tailored suit did for men. Style icons like Sean Connery and Cary Grant, as well as modern day 007 Daniel Craig (shaken not stirred) were always my style inspirations. To me, they are the epitome of refinement and sophistication, true gentlemen in style.
                    My passion for fashion and tailoring led me through the Fashion Design program at Parsons followed by stints in custom tailoring, fashion design, fashion styling and brand development. But the more I integrated myself in the industry, the more I realized that impeccable fit, for men and women, was almost impossible to find in ready to wear clothing. So, I launched The Tailory New York, a way for me to combine my two passions, Fashion Design and Custom Tailoring. Everyone wants to look their best and having a wardrobe curated to your body and lifestyle not only enables you to look your best but makes you feel your best.
                    At The Tailory New York, “we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind.” Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. Let us curate and design the wardrobe fit for YOU! </br>
                    <br> </br>
                    Sincerely,</br>
                    Shao Yang, Founder 
                    <br> </br>
                </p> 
        </div>
&#13;
&#13;
&#13;