ขอความช่วยเหลือเกี่ยวกับการเขียนโค้ดหน่อยครับ

[Thairanking]

พอดีว่ากำลัง ทดลองหัดเขียนเว็บ ประมาณว่าเป็นเว็บชื้อขายสินค้า

แต่ตอนนี้ต้องมาติดกับการดึงรายการสินค้าจากฐานข้อมูลมาแสดงผล ซึ่งในความคิดของผมต้องการที่จะให้แสดงสินค้าเป็นแนวนอน และ แสดง 1 สินค้าต่อ 1 ช่อง แต่กลับคล้ายเป็นว่า

สินค้าแสดงเป็นแนวตั้ง ดังภาพ




จึงได้ลองปรับใหม่จึงได้เป็นการ แสดงสินค้าแนวนอนตามที่หวังเอาไว้ แต่ ... ปัญหาคือ สินค้ามันซ้ำกัน 1 สินค้าแสดง 4 ช่อง ซึ่งจริงๆแล้ว สินค้า 1 ชิ้นต้องแสดง 1 ช่องเท่านั้น




TT ใครพอจะมีแนวทาง การแก้ให้ได้ไหมครับ ขอโทษที่รบกวนครับ มือใหม่ จริง ๆ

โค้ด เลือก ขยาย

<br />
<h2>รายการสินค้าทั้งหมด</h2>
<br>
<table class="table">


    @foreach (var item in Model)
    {
        <tr>
            <td>
                <div class="row">
                    <div class="col-md-4">
                        <img src="@Url.Content(@item.Pro_Image)" style="width:260px;" />
                        <br />

                        <h4 style="width:260px;">@Html.DisplayFor(modelitem => item.Pro_Name)</h4>
                        <p style="width:260px;">
                            @Html.DisplayFor(modelitem => item.Pro_Desc)
                        <p style="width:260px;"> @Html.DisplayFor(modelitem => item.Pro_Price) บาท </p>
                           <p><a class="btn btn-default" href="#" target="_blank">สั่งชื้อสินค้า</a></p>
                        </p>
                    </div>
                </div>
            </td>
        </tr>
    }
</table>

[wisutsak]

ใช้ bootstrap css เอาครับ  รองรับ responsive ด้วย
ไม่ต้องมาเขียนเอง

[killer777]

แนะนำ http://materializecss.com/grid.html อีกตัวครับ

[infamous]

จากโค๊ดท่านมันวนแถวครับ ไม่ใช่ columns และดูแล้วท่านใช้ bootstrap css อยู่แล้ว

ดังนั้นควรเปลี่ยน foreach block จากวนแถวเป็นวน col-md-4 เป็นโค๊ดด้านล่างแทนนะครับ

โค้ด เลือก ขยาย


<div class="row">
@foreach (var item in Model)
    {
  <div class="col-md-4">
      <img src="@Url.Content(@item.Pro_Image)" style="width:260px;" />
      <br />

      <h4 style="width:260px;">@Html.DisplayFor(modelitem => item.Pro_Name)</h4>
      <p style="width:260px;">
          @Html.DisplayFor(modelitem => item.Pro_Desc)
      <p style="width:260px;"> @Html.DisplayFor(modelitem => item.Pro_Price) บาท </p>
         <p><a class="btn btn-default" href="#" target="_blank">สั่งชื้อสินค้า</a></p>
      </p>
  </div>
   }
</div>


ถ้ายังไม่ได้ ก็ลงโค๊ดเต็มมาให้ดูใหม่นะครับ เดี๋ยวผมเข้ามาช่วยดูให้

[Thairanking]

จากโค๊ดท่านมันวนแถวครับ ไม่ใช่ columns และดูแล้วท่านใช้ bootstrap css อยู่แล้ว

ดังนั้นควรเปลี่ยน foreach block จากวนแถวเป็นวน col-md-4 เป็นโค๊ดด้านล่างแทนนะครับ

โค้ด เลือก ขยาย


<div class="row">
@foreach (var item in Model)
    {
  <div class="col-md-4">
      <img src="@Url.Content(@item.Pro_Image)" style="width:260px;" />
      <br />

      <h4 style="width:260px;">@Html.DisplayFor(modelitem => item.Pro_Name)</h4>
      <p style="width:260px;">
          @Html.DisplayFor(modelitem => item.Pro_Desc)
      <p style="width:260px;"> @Html.DisplayFor(modelitem => item.Pro_Price) บาท </p>
         <p><a class="btn btn-default" href="#" target="_blank">สั่งชื้อสินค้า</a></p>
      </p>
  </div>
   }
</div>


ถ้ายังไม่ได้ ก็ลงโค๊ดเต็มมาให้ดูใหม่นะครับ เดี๋ยวผมเข้ามาช่วยดูให้

โอ้ววว ได้แล้วครับ กราบขอบพระคุณเป็นอย่างมากครับ TT เอาไปฝัน 2 คืนแล้ว ขอบคุณจริงๆ ครับ ๆ

แนะนำ http://materializecss.com/grid.html อีกตัวครับ

ขอบคุณครับ มีความรู้มากๆ เลยครับ ขอบคุณจริงๆ ครับ

ใช้ bootstrap css เอาครับ  รองรับ responsive ด้วย
ไม่ต้องมาเขียนเอง

ขอบคุณมากๆ เลยครับผม