Question

我不擅长html，css，我想将漫游应用于dev，其中包含右图像

＆＃13;

.amount-2 {
    border: 3px solid #4CAF50;
    padding: 5px;
    width: 70%;
    float:left;
}

.sample {
    float: right;
    width: 30%;
    margin-top: -100px;
}

＆＃13;

<div class="amount-2">
Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Images must be between 200x200 and 800x1400 pixels.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.

<img class="sample" src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Cartoons-PNG/Cute_Bunny_Cartoon_Transparent_Clip_Art_Image.png?m=1478318101" alt="Pineapple" width="150" height="200">

</div>

＆＃13;

我不想修复高度

Answer 1

 <style type="text/css">
.main{
    border: 3px solid #4CAF50;
    width:auto;
    margin: 0;
}
  .amount-2 {

    padding: 5px;
    width: 70%;
    float:left;
}

.sample {
    float: right;
    width: 30%;
    margin-top: -100px;
}

</style>

<div class="main">
<div class="amount-2">
Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Images must be between 200x200 and 800x1400 pixels.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.
</div>
<div  class="sample">
<img src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Cartoons-PNG/Cute_Bunny_Cartoon_Transparent_Clip_Art_Image.png?m=1478318101" alt="Pineapple" width="150" height="200">

</div>

<div style="clear:both"></div>
</div>

试试这个。

Answer 2

图像现在没有溢出父div并且没有坏缩放：

.amount-2 {
    border: 3px solid #4CAF50;
    padding: 5px;
    width: 70%;
    float:left;
    overflow: hidden;
}

.sample {
    float: right;
    width: 30%;
    height: auto;
    margin-top: -100px;
}

<div class="amount-2">
Files must be less than 2 MB.
Allowed file types: png gif jpg jpeg.
Images must be between 200x200 and 800x1400 pixels.
Web page addresses and e-mail addresses turn into links automatically.
Lines and paragraphs break automatically.

<img class="sample" src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Cartoons-PNG/Cute_Bunny_Cartoon_Transparent_Clip_Art_Image.png?m=1478318101" alt="Pineapple" width="150" height="200">

</div>

Answer 3

文字需要有宽度。

.amount-2 {
    border: 3px solid #4CAF50;
    padding: 5px;
    width: 70%;
    float:left;
}

.amount-2 p {
    display: inline-block;
    vertical-align: top;
    width: 69%;
}

.sample {
    display: inline-block;
    vertical-align: top;
    width: 30%;
}

<div class="amount-2">
    <p>
       Files must be less than 2 MB.
       Allowed file types: png gif jpg jpeg.
       Images must be between 200x200 and 800x1400 pixels.
       Web page addresses and e-mail addresses turn into links automatically.
       Lines and paragraphs break automatically.
    </p>

<img class="sample" src="https://gallery.yopriceville.com/var/albums/Free-Clipart-Pictures/Cartoons-PNG/Cute_Bunny_Cartoon_Transparent_Clip_Art_Image.png?m=1478318101" alt="Pineapple" width="150" height="200">

</div>

无法应用border img float right

3 个答案: