浮动2分为右，一个在另一个 [英] Float 2 Divs to Right, One Atop the Other

问题描述

当我想我开始获得浮标的时候，我意识到我毫无头绪。我试图将不同宽度的2个div浮动到我的页面的右边：食谱页

Just when I think I'm beginning to get the hang of floats, I realize I'm clueless. I'm trying to the 2 divs of different widths to float to the right of my page here: recipe page

我想了解并理解这一点，并希望任何帮助。以下是我要执行的操作的屏幕截图： http：//www.altogether.accountsupport .com / graphics / _recipescreenshot.gif
谢谢，
德博拉

I would like to learn and understand this and would appreciate any help. Here's a screenshot of what I'm trying to do: http://www.altogether.accountsupport.com/graphics/_recipescreenshot.gif Thanks, Deborah

这是我到目前为止的编码

Here's the coding I have so far

<article id="content">


<!-- Start Page Content -->

<div style="float:right; display:inline-block; width:270px; position:relative;">

    <div style="display:inline; float:right; border:#cccccc 1px solid; padding:5px 20px 5px 5px;">
    <div><a href="/pdf/recipes/apps/CaviarCanapes.pdf" target="_blank"><img style="float:left; padding:2px 10px 0px 0px;" src="/graphics/icon-print.gif" width="12" height="15" alt="Printable Christmas Recipes">Print Recipe &#187;</a></div>
    <div style="padding:0 0 5px 22px;">PDF file, 1 pg.</div>
    </div>
    <div style="clear:right;"></div>

    <img src="/graphics/recipes/apps/CaviarCanapes.jpg" style="float:right; padding:20px 0px 10px 30px; width:250px; height:295px; clear:right;" alt="Caviar Canapes">
</div>

<a class="breadcrumb" href="/recipes.html">Christmas Recipes &#187;</a> <a class="breadcrumb" href="/recipes/appetizers.html">Appetizers &#187;</a>
<h1>Caviar Canapes with Salmon Butter</h1>

<div style="padding:0px 0px 30px 0px;">
<script type="text/javascript" src="/scripts/StarsRate/frontend/load.php?id=2&sid=0"></script>
</div>

<div class="addthispad">
<!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style addthis_16x16_style">
<a class="addthis_button_facebook"></a>
<a class="addthis_button_twitter"></a>
<a class="addthis_button_pinterest_share"></a>
<a class="addthis_button_tumblr"></a>
<a class="addthis_button_google_plusone_share"></a>
<a class="addthis_button_email"></a>
<a class="addthis_button_compact"></a><a class="addthis_counter addthis_bubble_style"></a>
</div>
<script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=altogether"></script>
<!-- AddThis Button END -->
</div>
<br><br>


<b>Ingredients</b>
<ul>
<li>1/2 cup (1 stick) unsalted butter, softened</li>
<li>3 ounces smoked salmon, finely chopped (approximately 3/4 cup)</li>
<li>2 tablespoons fresh dill, chopped</li>
<li>pinch of pepper.</li>
<li>1 baguette (long, narrow loaf of French bread)</li>
<li>5-6 ounces caviar</li>
<li>parsley for garnishing</li>
</ul><br>

<b>Directions</b>
<ol>
<li>Soften butter by bringing it to room temperature. Mix butter, chopped smoked salmon, dill and pepper in bowl and stir well.</li>
<li>Slice bread on a slant and spread salmon butter on each piece. Top with caviar and garnish with a small sprig of parsely.</li>
</ol><br>

<i>Submitted by Dirk R.</i>


<!-- End Page Content -->

   </article>

推荐答案

图片，您应该用

<div style="clear:both">
    <b>Ingredients</b>
    ...
</div>

这篇关于浮动2分为右，一个在另一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！