Question

我试图在元素的左侧和右侧分别使用两个元素，但是事情并没有像我期望的那样向上移动。请参阅下面的jsfiddle链接...

aside {
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: aqua;
}

#leftaside {float: left;}
#rightaside {float: right;}

article {float: left;
    margin: 0;
    padding: 0;
    width: 50%;
    background-color: lightgreen;

}

Answer 1

您的样式表旁边有明确的属性

UTF-8

删除它，它会起作用，或使用更具体的选择器覆盖section, aside, article, footer { clear: both; }到clear https://jsfiddle.net/vx7tjbkf/1/

css clear property：https://www.w3schools.com/cssref/pr_class_clear.asp
“指定元素的左侧或右侧不允许浮动元素”

Answer 2

您可以使用display：flex here

，而不是摆弄花车

尝试用div包装你的leftaside，article和rightaside并应用display：flex to it，通过这个你可以实现这个

检查此代码段

header {
  width: 100%;
}

nav {
  width: 100%;
}

aside {
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: aqua;
}

.content {
  display: flex;
  justify-content: space-between;
}

article {
  float: left;
  margin: 0;
  padding: 0;
  width: 50%;
  background-color: lightgreen;
}

footer ul {
  width: 30%;
  display: inline-block;
  padding: 0;
  margin: 0;
  vertical-align: top;
  list-style: none;
}


/* Professor's nav styling...no need to edit
**************************************** 
*/

nav.sitenav ul {
  list-style: none;
}

nav.sitenav li {
  display: inline-block;
  width: 8em;
  text-align: center;
}

nav.sitenav a {
  display: block;
  font-weight: bold;
}

nav.sitenav a:link,
nav.sitenav a:visited,
nav.sitenav a:hover,
nav.sitenav a:active {
  color: green;
  text-decoration: none;
  border-bottom: thin solid transparent;
}

nav.sitenav a:hover {
  border-bottom: thin solid green;
}

nav.sitenav li.youarehere a {
  background-color: #cdfecd;
  border-bottom: thin solid green;
}

section,
aside,
article,
footer {
  clear: both;
}

footer {
  border-top: thin solid green;
}

<header>
  <h1>Vegetables</h1>
</header>
<nav class="sitenav">
  <ul>
    <li><a href="#">Home</a></li>
    <li class="youarehere"><a href="#">Grow</a></li>
    <li><a href="#">Buy</a></li>
    <li><a href="#">Cook</a></li>
    <li><a href="#">Eat</a></li>
  </ul>
</nav>
<div class="content">
  <aside id="leftaside">
    <h3>What's New</h3>
    <ul>
      <li>Soko radicchio bunya nuts gram dulse silver beet parsnip napa cabbage lotus root sea lettuce brussels sprout cabbage.</li>
      <li>catsear cauliflower garbanzo yarrow salsify chicory garlic bell pepper napa cabbage lettuce tomato kale arugula melon sierra leone bologi rutabaga tigernut.</li>
      <li>Sea lettuce gumbo grape kale kombu cauliflower salsify kohlrabi okra sea lettuce broccoli celery lotus root carrot winter purslane turnip greens garlic.</li>
      <li>Jícama garlic courgette coriander radicchio plantain scallion cauliflower fava bean desert raisin spring onion chicory bunya nuts.</li>
      <li>Sea lettuce water spinach gram fava bean leek dandelion silver beet eggplant bush tomato.</li>
    </ul>
  </aside>
  <article>
    <h2>Growing Herbs Indoors</h2>
    <section>
      <h3>Basil</h3>
      <p><img alt="basil" src="images/basil-250.jpg" style="float: right;" />Chaya tepary bean elephant garlic swede sweet pepper tomato horseradish water chestnut drumstick good king henry mung bean. Bell pepper ahipa azuki bean bitter melon garden rocket
        chickpea, canna, swede. Tepary bean mung bean yacón, carrot catsear. Carrot ricebean avocado brussels sprout watercress lagos bologi bamboo shoot, garbanzo epazote. Lima Bean kohlrabi burdock - ahipa. Epazote camas bok choy - celtuce corn salad
        fiddlehead fat hen. Sorrel cardoon broccoli rabe chicory.</p>

      <p>Moth bean beetroot kai-lan. Guar summer purslane courgette elephant garlic chinese mallow turnip greens fluted pumpkin horse gram. Bitter melon celery, sea kale lima bean broadleaf arrowhead, taro. Common bean bitter gourd cassava good king henry
        chaya rutabaga good king henry, kurrat canna - yardlong bean kale. Ceylon spinach; fava bean pigeon pea potato squash, canna mung bean!
      </p>
    </section>
    <section>
      <h3>Mint</h3>
      <p><img alt="mint" src="images/mint-250.jpg" style="float: right;" />Spinach bell pepper gobo lotus root, ginger lima bean arracacha. Kohlrabi - good king henry, ricebean leek brussels sprout, pigeon pea; broadleaf arrowhead; spinach. Moth bean land
        cress; hamburg parsley mizuna greens swiss chard earthnut pea leek, west indian gherkin new zealand spinach taro turnip garden rocket! Ulluco jerusalem artichoke spring onion brinjal dandelion sea kale. Lotus root broadleaf arrowhead ulluco orache.
        Dolichos bean soko, leek okra mooli radish avocado sweet potato or kumara skirret.
      </p>
      <p>Beet greens aubergine garden rocket mustard. Green bean celtuce jerusalem artichoke fiddlehead bell pepper tatsoi soybean yacón sweet potato or kumara zucchini. Hamburg parsley mung bean onion polk. Kuka, lima bean kohlrabi moth bean ricebean leek
        moth bean scorzonera. Plectranthus, lettuce avocado pak choy.
      </p>
    </section>
  </article>
  <aside id="rightaside">
    <h3>Resources</h3>
    <ul>
      <li>Azuki bean, welsh onion garlic cucumber. Orache brinjal fava bean lagos bologi good king henry.</li>
      <li>Scorzonera mizuna greens courgette; winged bean shallot bamboo shoot</li>
      <li>Green bean ceylon spinach lamb's lettuce. Yarrow garbanzo spinach.</li>
      <li>Mizuna greens tepary bean leaves. Common bean; plectranthus bitter melon camas bok choy drumstick lizard's tail new zealand spinach.</li>
      <li>Indian pea, tepary bean beetroot golden samphire.</li>
      <li>Ti manioc peanut turnip. </li>
      <li>Gobo hamburg parsley earthnut pea garbanzo sea beet.</li>
      <li>Cucumber lizard's tail chinese mallow. </li>
      <li>Turnip dandelion horseradish collard greens ahipa collard greens jícama bitterleaf spring onion.</li>
    </ul>
  </aside>
</div>
<footer>
  <ul>
    <li>Manioc manioc garden rocket</li>
    <li>Swiss chard fluted pumpkin</li>
    <li>Prairie turnip ti lotus root rutabaga</li>
  </ul>
  <ul>
    <li>Winged bean manioc</li>
    <li>Lamb's lettuce indian pea</li>
    <li>Bamboo shoot</li>
    <li>Fava bean azuki bean daikon soybean</li>
  </ul>
  <ul>
    <li>Pumpkin, skirret sorrel sweet pepper</li>
    <li>Hamburg parsley</li>
    <li>Arracacha, nopal soybean</li>
    <li>Lettuce chaya spinach lotus root</li>
  </ul>
</footer>

使用float和clear with <aside>元素

2 个答案: