0

Como dice la pregunta, es una página de receta donde se muestran solo 3 cajas de contenido con texto e imagen, quiero que las 3 cajas queden en forma lineal y del mismo tamaño para que sea simétrico pero la caja de la izquierda queda más grande que las demás, esto lo noto gracias al header que está centrado y la caja del medio no se alinea al header sino que se muestra un poco más a la derecha, el estilo aún no está terminado ni mucho menos porque ese problema no me ha dejado avanzar, he intentado varias opciones como float y box-sizing, pero no me han funcionado o las he configurado mal yo, cabe acotar que soy nuevo en esto, este es mi primer diseño así que acepto todo tipo de críticas y sugerencias, agradezco que me tengan un poco de paciencia y muchas gracias de antemano.

`

<div id="primario">
    <header>
        <hgroup id="cabecera">
            <h1 id="cabecera1">Wilmer's kitchen</h1>
            <h2 id="cabecera2">Learn easy and delicious recipes</h2>
        </hgroup>
    </header>
    
    
    <section>
        <div id="arepa">
            <article>
                
                <h1><a id="link" href="./recipes/arepa.html">Venezuelan Arepas</a></h1>
                
                <a href="./recipes/arepa.html"><img src="./images/arepahead.jpg" alt="Venezuelan Arepa"></a>
                
                <h6>About</h6>
                
                <div id="arepatext">
                    <p>The arepa is a flat, dish-shaped, unleavened patty made 
                        of maize flour which can be grilled, fried, or even boil. 
                        Depending on what kind of meal (breakfast, lunch, or dinner)
                        can be filled in <strong>many</strong> ways. If serving for breakfast, 
                        my favorite filling is scrambled eggs, or cheese, and ham. 
                        Now, if they are to be served for lunch or dinner, they go 
                        perfectly with chicken, beef, pork, tuna, or beans.</p>
                    
                    <p>The arepa is a pre-Columbian dish from the area that is now 
                        Venezuela, Panamá and Colombia. Instruments used to make 
                        flour for the arepas, and the clay slabs on which they 
                        were cooked, were often found at archaeological sites in 
                        the area.</p>
                </div>

            </article>
        </div> 
        
        <div id="karaage"> 
            <article>
                
                <h1><a id="link" href="./recipes/karaage.html">Karaage Chicken</a></h1>
                
                <a href="./recipes/karaage.html"><img src="./images/karaagehead.jpg" alt="Karaage Chicken"></a>
                
                <h6>About</h6>
                
                <div id="karaagetext">
                    <p>Karaage is often cited to have been popularized in 
                        the 1920s by the Toyoken restaurant in Beppu, Japan. 
                        The method was popularized because of the food shortages 
                        in Japan after World War II, specifically for chicken. 
                        Chicken was already a popular meal, but using the Karaage 
                        method made it easier to cook, and provided a different 
                        way to eat chicken.</p>
                    
                    <p>The Japanese heavy battered frying technique used for 
                        fried chicken, “karaage”, has only been in Japan since 
                        the 1920s. It was originally introduced by the Chinese 
                        as a way of frying tofu for vegetarian meals and is 
                        unique as it uses soy sauce and rice wine in the 
                        cooking process.</p>
                </div>
                    
                </article>
        </div>  
        
        <div> 
            <article id="fajitas">
                
                <h1><a id="link" href="./recipes/chicken.html">Chicken Fajitas</a></h1>
                
                <a href="./recipes/chicken.html"><img src="./images/fajitashead.jpg" alt="Chicken Fajitas"></a>
                
                <h6>About</h6>
                
                <div id="fajitastext">
                    <p>A fajita, in Tex-Mex cuisine, is any stripped grilled meat 
                        with stripped peppers and onions that is usually served 
                        on a flour or corn tortilla. The term originally referred 
                        to skirt steak, the cut of beef first used in the dish. 
                        Popular alternatives to skirt steak include chicken and 
                        other cuts of beef, as well as vegetables instead of meat.</p>
                
                    <p>The first culinary evidence of the fajitas with the cut of 
                        meat, the cooking style (directly on a campfire or on a 
                        grill), and the Spanish nickname goes back as far as the 
                        1930s in the ranch lands of South and West Texas.</p>
                </div>

            </article>
        </div>   
    </section>
      
`

CSS

* {
    font-family: sans-serif;
    overflow: hidden; 
}

section {
    background-color: #192a56;
    display:flex;
    margin: 30px;
    
}

body {
    background-color: black;
}

#cabecera {
    text-align: center;
    background-color: #192a56;
    color: white;
}

#cabecera2 {
    font-style: italic;
    font-size: 18px;
}

img {
    height: 300px;
    width: 400px;
    padding: 10px;
}

#arepa,
#karaage,
#fajitas {
    overflow: hidden;
    width: auto;
    border-left: 1px solid black;
    padding: 5px;
    text-align: center;
}


#link {
    color: white;
    font-style: italic;
    text-decoration: none;
}

#arepatext,
#karaagetext,
#fajitastext {
    color: white;   
}```



1 respuesta 1

1

Buen día,

Podrías utilizar display: table; en la sección, y el ancho de las columnas en lugar de auto ponerlas a 33.33%. También agregué display: inline-block; y box-sizing: border-box; a las columnas

* {
    font-family: sans-serif;
    overflow: hidden; 
}

section {
    background-color: #192a56;
    display:table;
    margin: 30px;
    
}

body {
    background-color: black;
}

#cabecera {
    text-align: center;
    background-color: #192a56;
    color: white;
}

#cabecera2 {
    font-style: italic;
    font-size: 18px;
}

img {
    height: 300px;
    width: 400px;
    padding: 10px;
}

#arepa,
#karaage,
#fajitas {
    display: inline-block;
    box-sizing: border-box;
    overflow: hidden;
    width: 33.33%;
    border-left: 1px solid black;
    padding: 5px;
    text-align: center;
    float: left;
}


#link {
    color: white;
    font-style: italic;
    text-decoration: none;
}

#arepatext,
#karaagetext,
#fajitastext {
    color: white;   
}
<div id="primario">
    <header>
        <hgroup id="cabecera">
            <h1 id="cabecera1">Wilmer's kitchen</h1>
            <h2 id="cabecera2">Learn easy and delicious recipes</h2>
        </hgroup>
    </header>
    
    
    <section class="row">
        <div id="arepa" class="column">
            <article>
                
                <h1><a id="link" href="./recipes/arepa.html">Venezuelan Arepas</a></h1>
                
                <a href="./recipes/arepa.html"><img src="./images/arepahead.jpg" alt="Venezuelan Arepa"></a>
                
                <h6>About</h6>
                
                <div id="arepatext">
                    <p>The arepa is a flat, dish-shaped, unleavened patty made 
                        of maize flour which can be grilled, fried, or even boil. 
                        Depending on what kind of meal (breakfast, lunch, or dinner)
                        can be filled in <strong>many</strong> ways. If serving for breakfast, 
                        my favorite filling is scrambled eggs, or cheese, and ham. 
                        Now, if they are to be served for lunch or dinner, they go 
                        perfectly with chicken, beef, pork, tuna, or beans.</p>
                    
                    <p>The arepa is a pre-Columbian dish from the area that is now 
                        Venezuela, Panamá and Colombia. Instruments used to make 
                        flour for the arepas, and the clay slabs on which they 
                        were cooked, were often found at archaeological sites in 
                        the area.</p>
                </div>

            </article>
        </div> 
        
        <div id="karaage"> 
            <article>
                
                <h1><a id="link" href="./recipes/karaage.html">Karaage Chicken</a></h1>
                
                <a href="./recipes/karaage.html"><img src="./images/karaagehead.jpg" alt="Karaage Chicken"></a>
                
                <h6>About</h6>
                
                <div id="karaagetext">
                    <p>Karaage is often cited to have been popularized in 
                        the 1920s by the Toyoken restaurant in Beppu, Japan. 
                        The method was popularized because of the food shortages 
                        in Japan after World War II, specifically for chicken. 
                        Chicken was already a popular meal, but using the Karaage 
                        method made it easier to cook, and provided a different 
                        way to eat chicken.</p>
                    
                    <p>The Japanese heavy battered frying technique used for 
                        fried chicken, “karaage”, has only been in Japan since 
                        the 1920s. It was originally introduced by the Chinese 
                        as a way of frying tofu for vegetarian meals and is 
                        unique as it uses soy sauce and rice wine in the 
                        cooking process.</p>
                </div>
                    
                </article>
        </div>  
        
        <div> 
            <article id="fajitas">
                
                <h1><a id="link" href="./recipes/chicken.html">Chicken Fajitas</a></h1>
                
                <a href="./recipes/chicken.html"><img src="./images/fajitashead.jpg" alt="Chicken Fajitas"></a>
                
                <h6>About</h6>
                
                <div id="fajitastext">
                    <p>A fajita, in Tex-Mex cuisine, is any stripped grilled meat 
                        with stripped peppers and onions that is usually served 
                        on a flour or corn tortilla. The term originally referred 
                        to skirt steak, the cut of beef first used in the dish. 
                        Popular alternatives to skirt steak include chicken and 
                        other cuts of beef, as well as vegetables instead of meat.</p>
                
                    <p>The first culinary evidence of the fajitas with the cut of 
                        meat, the cooking style (directly on a campfire or on a 
                        grill), and the Spanish nickname goes back as far as the 
                        1930s in the ranch lands of South and West Texas.</p>
                </div>

            </article>
        </div>   
    </section>
      

1
  • Muchas gracias, me sirvió Commented el 10 feb. 2022 a las 7:38

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.