ASP.NET 4つの.ascxで作った画面を一つの.aspxに取り込もうとしているのですが上手くいきません。

前提・実現したいこと

4つの.ascxで作った画面を一つの.aspxに取り込もうとしているのですが上手くいきません。
画面がずれてしまいます。
](f1d5a10778a8adf6cb9484c23cb408ed.png)
FRAMESETを使うことも考えたのですが,ascxは扱っていない?

WebRyohiX1.ascxとWebRyohiX2.ascx が上段左右に
その下の行に
WebRyohiX3.ascxとWebRyohiX4.ascx を左右に表示したいのです。
現在の表示は
WebRyohiX1
WebRyohiX3,WebRyohiX2
WebRyohiX4 と表示されています。

発生している問題・エラーメッセージ

画面がずれてしまいます。

該当のソースコード

ASP.NETソースコード
1
2--- ASPX
3<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="WebRyohiXX.aspx.vb" Inherits="WebPartList.WebrYOHIxx" %>
4<%@ Register src="WebRyohiX1.ascx" tagname="WebRyohiX1" tagprefix="uc1" %>
5<%@ Register src="WebRyohiX2.ascx" tagname="WebRyohiX2" tagprefix="uc2" %>
6<%@ Register src="WebRyohiX3.ascx" tagname="WebRyohiX3" tagprefix="uc3" %>
7<%@ Register src="WebRyohiX4.ascx" tagname="WebRyohiX4" tagprefix="uc4" %>
8<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
9
10<html xmlns="http://www.w3.org/1999/xhtml">
11<head runat="server">
12
13    <link rel="stylesheet" href="Styles/style.css">
14    <title></title>
15</head>
16<body>
17    <form id="form1" runat="server">
18    <div>
19                </p>
20                    <a href="Part3.htm" target="main">※メニュー画面へ戻る</a>
21   
22                <br />
23                <br />
24                <br />
25                <div class="ryohi" >  <uc1:WebRyohix1 ID="WebRyohix1" runat="server" /></div>
26                <div class="meisai" > <uc2:WebRyohiX2 ID="WebRyohiX2" runat="server" /></div>
27                <div class="menseki" > <uc3:WebRyohiX3 ID="WebRyohiX3" runat="server" /></div>
28                <div class="homon" > <uc4:WebRyohiX4 ID="WebRyohiX4" runat="server" /></div>
29                <br />
30                <br />
31                <br />
32    
33    </div>
34    </form>
35</body>
36</html>
37
38---スタイルシート
39'''
40.ryohi {
41    background-color:  #ccc;    /* 背景色指定 */
42    border: solid 2px;          /* 枠線指定 */
43    width: 495px;
44    float: left;
45}
46
47.meisai {
48    background-color:  #ccc;    /* 背景色指定 */
49    border: solid 2px;          /* 枠線指定 */
50    width: 495px;
51    float: left;
52}
53
54.menseki {
55    background-color:  #ccc;    /* 背景色指定 */
56    border: solid 2px;          /* 枠線指定 */
57    width: 495px;
58    float: left;
59}
60
61.homon {
62    background-color:  #ccc;    /* 背景色指定 */
63    border: solid 2px;          /* 枠線指定 */
64    width: 495px;
65    float: left;
66}
67'''

WebRyohix1.ascx
1<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="WebRyohiX1.ascx.vb" Inherits="WebPartList.WebRyohiX1" %>
2
3<!DOCTYPE html>
4<html lang="ja">
5  <head>
6    <link rel="stylesheet" href="Styles/style.css" />
7    <title>HTML書き方</title>
8  </head>
9	
10<div class="ryohi">
11
12    <h1>HTML-01の書き方</h1>
13    <p>はじめてのHTML-01を作りました</p>
14
15   <table border="1">
16   <tr style= "text-align: center;" ><td>月/日</td><td>区分</td><td colspan="3">区　間</td><td colspan="2">金　額</td></tr>
17
18   <tr><td>10/10</td><td></td> <td>++</td> <td>〜</td> <td></td> <td>8000円</td> </tr>
19   <tr><td>10/12</td> <td></td> <td>**</td> <td>〜</td> <td></td> <td>159円</td> </tr>
20   <tr><td>10/13</td> <td></td> <td>**</td> <td>〜</td> <td></td> <td>159円</td> </tr>
21   <tr><td>10/14</td> <td></td> <td>**</td> <td>〜</td> <td></td> <td>159円</td> </tr>
22   <tr><td>10/15</td> <td></td> <td>*</td> <td>〜</td> <td></td> <td>159円</td> </tr>
23   <tr><td>10/16</td> <td></td> <td>**</td> <td>〜</td> <td></td> <td>159円</td> </tr>
24   <tr style= "color: orange;"><td colspan="5"></td> <td>10000円</td> </tr>
25   <tr style= "color: orange;"><td colspan="5"></td> <td>10000円</td> </tr>
26   <tr style= "color: orange;"><td colspan="5"></td> <td>10000円</td> </tr>
27   <tr style= "color: orange;"><td colspan="5"></td> <td>10000円</td> </tr>
28   </table>
29
30</div>
31
32</html>

退会済みユーザー

2021/03/05 05:44

開発環境（OS, Visual Studio, .NET Framework のバージョンなど）を書いてください。簡単なサンプルで良いのでユーザーコントロールのコードを書いてください。ずれてうまくいかないというだけでは分かりません。どのようにしたいのかを書いてください。

pentagon

2021/03/05 06:08

OS:Windows10 Visual Studio2010 NET FrameWork4 です

pentagon

2021/03/05 06:13 編集

WebRyohiX1.ascxとWebRyohiX2.ascx が上段左右にその下の行に WebRyohiX3.ascxとWebRyohiX4.ascx を左右に表示したいのです。現在の表示は WebRyohiX1 WebRyohiX3,WebRyohiX2 WebRyohiX4 と表示されています。

退会済みユーザー

2021/03/05 07:42

上の書いていただいた開発環境と現状＆どのようにしたいかはコメント欄ではなく質問本文を編集して追記願います。コメント欄は「質問への追記・修正の依頼」のためのものだそうですので。追加していたたいたコードは ``` と ``` で囲ってください（``` はバッククォート 3 つ）。インデントされて見やすくなるので。

退会済みユーザー

2021/03/06 01:03

ユーザーコントロールに <!DOCTYPE html> 宣言とか、html, head, body などは不要ですが、質問のコードにはそれがあるというのは何か理由があるのですか？

pentagon

2021/03/06 02:09

意味はありません。

退会済みユーザー

2021/03/06 02:17

> 意味はありません。意味がないものは入れないのが原則、というか間違いです。ユーザーコントロールに <!DOCTYPE html> 宣言とか、html, head, body などは不要です。直してください。

行動規範の内容に同意します

回答1件

ベストアンサー

WebRyohiX1.ascxとWebRyohiX2.ascx が上段左右に
その下の行に
WebRyohiX3.ascxとWebRyohiX4.ascx を左右に表示したいのです。

ASP.NET はあまり関係なくて、html + css の課題のようです。以下のいずれかではいかがですか？

(1) table, tr, td 要素でテーブルを作って、ユーザーコントロールをその中に配置する。

(2) 今のコードでユーザーコントロールを含んでいる div 要素に css の float:left; や float:right; を適用する。

投稿2021/03/05 07:50

退会済みユーザー

総合スコア0

pentagon

2021/03/06 00:44 編集

画面が挿入できないのですが,Style_Sheet　float:leftにしたらソースデザイン上ではきれいに上下,左右に並んでいるのですが実行結果は添付の画面のまま変わりません。勘違いでした。デザイン上では右側のソリューション枠が狭まっていた為枠の一つがずれただけでした。

退会済みユーザー

2021/03/06 00:56

> Style_Sheet　float:leftにしたらそれは具体的にどのようにしたのですか？　ユーザーコントロールのコードに、 > <div class="ryohi"> > <div class="left_01"> とありましたが、それですか？　ではその中身は？上の回答で書いた案 (1) の方が確実だと思いますが、それはやりたくない事情がありますか？

pentagon

2021/03/06 02:15

<div class="left_01"> は削除しました。現在, 表示された枠を縮めると上下,左右 2個づつ表示されるのでokだと思います。只,最大枠のサイズ設定が必要かと思われます。

退会済みユーザー

2021/03/06 02:42

> 現在, 表示された枠を縮めると上下,左右 2個づつ表示されるのでokだと思います。 > 只,最大枠のサイズ設定が必要かと思われます。だから上のコメントで上の回答で書いた案 (1) の方が確実だと思いますが、それはやりたくない事情がありますか？・・・と聞いたのですが？何にせよ私の回答の (1) または (2) で問題は解決と理解します。

行動規範の内容に同意します