Question

在我目前的代码中，上传的图片位于表格的顶部，但由于我正在创建的网站布局如此之宽，我想将图片放在桌子旁边，我该如何修复我的代码是为了实现这个目标吗？

我的节目文件

<body>
    <div class = "head1">
        <h1>Inventory Information</h1>

        <div class = "image1" >
            <img src= "http://dx.deucex.com/i/logo.png" >
        </div>
    </div>  
</body>

<aside>
<%= render @inventory.photos %>

<h3>Add a photo:</h3>
<%= render 'photos/form' %>

<div class = "inventory_border" >

<table>
    <tr>
        <p>
            <td><strong>Product Name:</strong></td>
            <td><%= @inventory.product_name %></td>
        </p>
    </tr>

    <tr>
        <p>
            <td><strong>Brand Name:</strong></td>
            <td><%= @inventory.brand_name %></td>
        </p>
    </tr>

    #more code...
</table>
</div>


<%= link_to 'Back', inventories_path %>
</aside>

CSS

body
{
    background: #e6f2ff;
}

input[type=text]{
    width: 20%;
    padding: 12px 12px;
    border: 2px solid #ccc;
    background-color: white;
}

textarea {
    width: 20%;
    height: 10px;
    padding: 12px 12px;
    border: 2px solid #ccc;
    background-color: white;
    resize: none
}

h1{
    background-color: #ccccff;
    width: 400px;
    height: 50px;
    border: 7px solid #333333;
    border-radius: 20px;
    padding-left: 20px;
    padding-top: 10px;
    margin-left: 5px;
    margin-top: 30px;
    border-style: double;
}

.vend2{
    background-color: white;
    width: 1800px;
    margin-left: -8px;
    }

.invent{
    background-color: white;
    width: 1800px;
    margin-left: -8px;
}

table{
    width: 800px;
}


th{
    background-color: #b3b3cc;
    border-radius: 4px;
    border: 2px solid black;
    width: 365px;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

input[type = buttton], input[type = submit], {
    background-color: #ccddff;
    border: solid;
    border-radius: 3px;
    color: black;
    padding: 16px 20px;
    text-decoration: none;
    cursor: pointer;

}

input[type = buttton]:hover, input[type = submit]:hover, {
    background-color: blue;
    border: solid;
    border-radius: 3px;
    color: white;
    padding: 16px 20px;
    text-decoration: none;
    cursor: pointer;
    border-color:black;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

h2{
    background-color: red;
    border: none;
    width: 750px;
   }

.head{
    display:flex;
    background-color: #e6e6e6;
    min-width: 140%

}

.head1{
    display:flex;
    background-color: #e6e6e6;
    min-width: 140%
}

div.head {
    border-bottom: 3px outset black;
    border-top: 30px outset gray;
    margin-top: -50px;
    margin-left: -8px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    margin-bottom: 60px;

}

div.head1 {
    border-bottom: 3px outset black;
    border-top: 30px outset gray;
    margin-top: -50px;
    margin-left: -8px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    margin-bottom: 60px;
}

div.header{
    font-size: 40px;
    margin-left: 50px;
}




div.image1{
    margin-left: 100px;
}



.inventory_border{
    border-top: 3px solid black;
    max-width: 50%
}

.vendor_border{
    border-top: 3px solid black;
    max-width: 70%
}


div.field{
   background-color: #e6e6e6;
   max-width: 30%;
   border: 1px solid black;

}


aside{
    margin-left: 50px;

}

article{
    margin-left: 800px;
    border-left: 1px solid gray;
    padding: 1em;
    overflow: hidden;
 }

Rails：如何并排制作表格和图像

0 个答案: