2017-07-28 10 views
1

してください。誰かが私にこのことをどうやって説明することができますか?彼が使用したCSS変数を見つける良いツールはありますか?は、私は、このページを複製しようとしているページのコンテンツセンターの本部

My test page

HTML

<!DOCTYPE html> 

/*-------------------------RECIPES---------------------------*/ 
 
    .recipe-header-left{ 
 
     float:left; 
 
     position: relative; 
 
     padding-left: 25px; 
 
     padding-right: 25px; 
 
    } 
 
    .recipe-ingredients { 
 
     float:left; 
 
    } 
 
    body { 
 
     padding-left: 25px; 
 
     padding-right: 25px; 
 
    }
<html> 
 
     <head> 
 
      <meta charset="UTF-8"> 
 
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
      <!-- jQuery library --> 
 
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
      <!-- Latest compiled JavaScript --> 
 
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
      <link type="text/css" rel="stylesheet" href="css/customCSS.css" > 
 
      <title></title> 
 
     </head> 
 
     <body> 
 
      <!-------------- HEADER ---------------------> 
 
      <?php include 'header.php'; ?> 
 
      <!-------------- CONTENT ---------------------> 
 
      <div class="container-fluid"> 
 
       <div class="row"> 
 
        <div class="recipe-header-left" > 
 
         <img src="http://cdn.jamieoliver.com/recipe-database/xtra_med/46260004.jpg"> 
 
        </div> 
 
        <div class="recipe-details"> 
 
         <h1>Spanish tortilla</h1> 
 
         <h5>A SPANISH CLASSIC</h5> 
 
         <p>“This classic Spanish dish is very versatile and quick to whip up. The tortilla (or Spanish omelette) can be served hot or cold and is a fantastic way of using up all kinds of ingredients – simply add in any leftover vegetables, crumbled or grated cheese, jarred red peppers or cooked sausage. They’ll all taste great, so get experimenting! ”</p> 
 
         <h3>Serves 6</h3> 
 
         <h3>Difficulty NOT TOO TRICKY</h3> 
 
        </div> 
 
         
 
         
 
        <div class="recipe-ingredients"> 
 
         <h2>Ingredients</h2> 
 
         <p>300 g waxy potatoes</p> 
 
         <p>1 onion</p> 
 
         <p>olive oil</p> 
 
         <p>5 large free-range eggs</p>      
 
        </div> 
 
       </div> 
 
       <div class="row" style="padding-left: 25px;"> 
 
        <h2>Method</h2> 
 
        <ol> 
 
         <li>Peel the potatoes using a speed-peeler, then carefully cut them into thin slices. Pat the potato slices dry with a clean tea towel.</li> 
 
         <li>Peel and finely slice the onion. Drizzle 2 tablespoons of oil into a small frying pan over a medium heat, then add the onion and potatoes.</li> 
 
         <li>Turn the heat down to low and cook for 25 to 30 minutes, or until the onions are turning golden and the potato slices are cooked through. Try not to stir it too much or the potatoes will break up – just use a fish slice to flip them over halfway through.</li> 
 
         <li>Crack the eggs into a mixing bowl, season with a tiny pinch of sea salt and black pepper, then whisk together with a fork.</li> 
 
         <li>When the onions and potatoes are cooked, remove the pan from the heat and carefully tip them into the eggs. Transfer the mixture back into the frying pan and place it over a low heat. Cook for around 20 minutes, or until there’s almost no runny egg on top.</li> 
 
         <li>Use a fish slice to slightly lift and loosen the sides of the tortilla. Carefully flip the pan over a dinner plate and tip out the tortilla, then slide it back into the pan and cook for another 5 minutes, or until golden and cooked through.</li> 
 
         <li>Turn out the tortilla onto a serving board, then cut into 6 wedges and serve hot or cold with a simple green salad.</li> 
 
        </ol> 
 
       </div> 
 
      </div> 
 
       
 
      <!-------------- FOOTER ---------------------> 
 
      <?php include 'footer.html'; ?> 
 
     </body> 
 
    </html> 
 

 
CSS

+0

あなたのヘッダーを修正し、メインのコンテンツをスクロールしたいですか? あなたはあなたの目的を少しはっきりさせることができますか? –

答えて

0

.rowにフレックスボックスを使用し、列の幅で再生します。

.recipe-header-left { 
 
    float: left; 
 
    position: relative; 
 
    padding-left: 25px; 
 
    padding-right: 25px; 
 
} 
 

 
.recipe-ingredients { 
 
    width: 20%; 
 
} 
 

 
body { 
 
    padding-left: 25px; 
 
    padding-right: 25px; 
 
} 
 

 
.row { 
 
    display: flex; 
 
} 
 
.recipe-details { 
 
width: 50%; 
 
} 
 
.method { 
 
width: 40%; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<!-- jQuery library --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<!-- Latest compiled JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="recipe-header-left"> 
 
     <img src="http://cdn.jamieoliver.com/recipe-database/xtra_med/46260004.jpg"> 
 
    </div> 
 
    <div class="recipe-details"> 
 
     <h1>Spanish tortilla</h1> 
 
     <h5>A SPANISH CLASSIC</h5> 
 
     <p>“This classic Spanish dish is very versatile and quick to whip up. The tortilla (or Spanish omelette) can be served hot or cold and is a fantastic way of using up all kinds of ingredients – simply add in any leftover vegetables, crumbled or grated 
 
     cheese, jarred red peppers or cooked sausage. They’ll all taste great, so get experimenting! ”</p> 
 
     <h3>Serves 6</h3> 
 
     <h3>Difficulty NOT TOO TRICKY</h3> 
 
    </div> 
 
</div> 
 
<div class="row"> 
 

 
    <div class="recipe-ingredients"> 
 
     <h2>Ingredients</h2> 
 
     <p>300 g waxy potatoes</p> 
 
     <p>1 onion</p> 
 
     <p>olive oil</p> 
 
     <p>5 large free-range eggs</p> 
 
    </div> 
 

 
    <div class="method"> 
 
    <h2>Method</h2> 
 
    <ol> 
 
     <li>Peel the potatoes using a speed-peeler, then carefully cut them into thin slices. Pat the potato slices dry with a clean tea towel.</li> 
 
     <li>Peel and finely slice the onion. Drizzle 2 tablespoons of oil into a small frying pan over a medium heat, then add the onion and potatoes.</li> 
 
     <li>Turn the heat down to low and cook for 25 to 30 minutes, or until the onions are turning golden and the potato slices are cooked through. Try not to stir it too much or the potatoes will break up – just use a fish slice to flip them over halfway 
 
     through. 
 
     </li> 
 
     <li>Crack the eggs into a mixing bowl, season with a tiny pinch of sea salt and black pepper, then whisk together with a fork.</li> 
 
     <li>When the onions and potatoes are cooked, remove the pan from the heat and carefully tip them into the eggs. Transfer the mixture back into the frying pan and place it over a low heat. Cook for around 20 minutes, or until there’s almost no runny 
 
     egg on top.</li> 
 
     <li>Use a fish slice to slightly lift and loosen the sides of the tortilla. Carefully flip the pan over a dinner plate and tip out the tortilla, then slide it back into the pan and cook for another 5 minutes, or until golden and cooked through.</li> 
 
     <li>Turn out the tortilla onto a serving board, then cut into 6 wedges and serve hot or cold with a simple green salad.</li> 
 
    </ol> 
 
    </div> 
 
</div>

0

divあなたはmargin: 15px autoを設定し、幅を制限する必要がセンターに

.container-fluid { 
    width: 100%; 
    max-width: 960px; 
    margin: 15px auto; 
} 
+0

固定幅は反応しません.... –

+0

ハハもセンタリングに集中し、答えを更新しました – ewwink

関連する問題