অ্যাঙ্কারের ভিতরে কোনও ডিভি স্থাপন করা কি কখনও সঠিক?

Question

আমি শুনেছি যে একটি ইনলাইন উপাদানের ভিতরে একটি ব্লক উপাদান স্থাপন করা এইচটিএমএল পাপ:

<a href="http://www.mydomain.com"><div>
What we have here is a problem. 
You see, an anchor element is an inline element,
and the div element is a block level element.
</div></a>

তবে display:blockস্টাইলশিটে যেমন আপনি বাইরের অ্যাঙ্করকে স্টাইল করেন তবে কী হবে ? এটা কি এখনও ভুল? ব্লক-স্তর এবং ইনলাইন উপাদানের উপর এইচটিএমএল 4.0.০১ স্পেকটি মনে হয় বলে মনে হয়:

স্টাইল শিটগুলি কোনও উপাদানকে ব্লক বা ইনলাইন হিসাবে রেন্ডার করা হয়েছে কিনা তা স্বেচ্ছাচারী উপাদানগুলির রেন্ডারিং নির্দিষ্ট করার উপায় সরবরাহ করে। কিছু ক্ষেত্রে যেমন তালিকার উপাদানগুলির জন্য একটি ইনলাইন শৈলী, এটি যথাযথ হতে পারে তবে সাধারণভাবে বলতে গেলে লেখকরা এইচটিএমএল উপাদানগুলির প্রচলিত ব্যাখ্যাটিকে এইভাবে ওভাররাইড করা থেকে নিরুৎসাহিত করেন।

কারও কাছে এই সমস্যা সম্পর্কে আরও কোনও টিপস রয়েছে?

Comments

আরও দেখুন: stackoverflow.com/questions/1091739/html-div-in-link-problem ।

— অসন্তুষ্ট গোয়াট

@ ডিসগ্রান্টলড গোট - লিঙ্কটির জন্য ধন্যবাদ - আশা করি আমি তাড়াতাড়ি দেখতে পেলাম :-)

— টম

অ্যাঙ্কর এবং \ বা লিঙ্ক উপাদান হ'ল একটি ব্রাউজার অটোমেশন নিয়ন্ত্রণ। এবং তাই এটির একটি ব্রাউজার রয়েছে পূর্বনির্ধারিত উপস্থাপনা এবং আচরণ। একটি জেনুইন প্লেইন এইচটিএমএল উপাদানটি মোড়ানোর জন্য: স্প্যানের ভিতরে ডিভ করা অবশ্য একটি পাপ। কোনও ট্যাগ কোনও স্তরের আচরণ যুক্ত করে না তার পিছনে কারণটি নথির প্রবাহকে বিঘ্নিত না করে পাঠ্যের অংশগুলি চিহ্নিত করার একটি প্রয়োজন, এগুলি নয় কারণ সেগুলি ইনলাইন উপাদান হিসাবে বোঝানো হয়েছিল। এই pov থেকে, A, একটি কিছুই করার ট্যাগ নয়। এর অস্তিত্ব ইস্যুটির বাইরে এবং পাপ নয়, তবে কোড কদর্যতা এবং \ বা অস্পষ্টত্বে অবদান রাখতে পারে।

— বেকিম বাকাজ

ভবিষ্যতে যাঁরা প্রত্যেকে এখানে যাচাই করেন, দয়া করে নোট করুন যে অ্যাঙ্গার ট্যাগগুলি ব্লক স্তরের উপাদানগুলি HTML5- এ অন্তর্ভুক্ত রাখতে সক্ষম হলেও তাদের মধ্যে অন্য অ্যাঙ্কর ট্যাগযুক্ত ব্লক স্তর উপাদান থাকতে পারে না! কারণ মূলত, অ্যাঙ্কার ট্যাগগুলিতে যা কিছু আছে তার ভিতরে অন্য অ্যাঙ্কর ট্যাগ থাকতে পারে না। : আপনি সম্পর্কে আরো এখানে পড়তে পারেন stackoverflow.com/questions/13052598/...

— aderchox

Answer 1

আপনি যে খাবারটি সরবরাহ করছেন তা HTML এর সংস্করণ অনুসারে:

• এইচটিএমএল 5 এ বলা হয়েছে যে<a>উপাদানটি "পুরো অনুচ্ছেদ, তালিকাগুলি, টেবিলগুলি এবং এমন কি আরও পুরো বিভাগগুলিতে আবৃত হতে পারে, যতক্ষণ না এর মধ্যে কোনও ইন্টারেক্টিভ সামগ্রী নেই (যেমন বোতাম বা অন্যান্য লিঙ্কগুলি)"।

• এইচটিএমএল 4.01 নির্দিষ্ট করে যে<a>উপাদানগুলিতে কেবল এটি থাকতে পারে ইনলাইন উপাদান । এ <div>হ'ল একটি ব্লক উপাদান , সুতরাং এটি কোনও এর ভিতরে উপস্থিত নাও হতে পারে <a>।

  অবশ্যই আপনি একটি ইনলাইন উপাদান স্টাইল করার স্বাধীনতা যেমন এটি একটি ব্লক বলে মনে হচ্ছে , বা প্রকৃতপক্ষে কোনও ব্লককে স্টাইল করুন যাতে এটি ইনলাইন রেন্ডার হয়। শর্তাদি inlineএবং blockএইচটিএমএল- এ ব্যবহারটি নথির শব্দার্থ কাঠামোর সাথে উপাদানগুলির সম্পর্ককে বোঝায়, যখন সিএসএসে একই পদগুলি উপাদানগুলির ভিজ্যুয়াল স্টাইলিংয়ের সাথে সম্পর্কিত related আপনি যদি ইনলাইন উপাদানগুলিকে একটি অবরুদ্ধভাবে প্রদর্শন করেন তবে তা ঠিক।

  তবে আপনার অবশ্যই নিশ্চিত হওয়া উচিত যে সিএসএস উপস্থিত না থাকায় নথির কাঠামোটি এখনও বোধগম্য হয়েছে, উদাহরণস্বরূপ যখন কোনও সহায়ক প্রযুক্তি যেমন যেমন স্ক্রিন রিডার দ্বারা অ্যাক্সেস করা হয় - বা প্রকৃতপক্ষে শক্তিশালী গুগলবোট দ্বারা পরীক্ষা করা হয় তখন।

Comments

W3.org/TR/REC-html40/sgML/dtd.html এ 4.01 এর জন্য একটি ডিটিডি রয়েছে । এ-তে% ইনলাইন% থাকতে পারে; % ইনলাইন% হ'ল বিভিন্ন স্টাফের গোছা (আপনি লিঙ্কগুলি অনুসরণ করতে পারেন) তবে ডিআইভি তাদের মধ্যে নেই। সুতরাং, ভিতরে একটি ডিআইভির সাথে একটি এ এক্সএমএল-বৈধতাযোগ্য নয়। আমি মনে করি যে ডিটিডি কমিটির উদ্দেশ্যগুলি বেশ ভালভাবে প্রকাশ করেছে, তাই আমি বলব: না

— কার্ল স্মট্রিক্জ

@ ইভান: আমার উত্তরের প্রথম লিঙ্কটি এইচটিএমএল 4.01 এর প্রাসঙ্গিক বিভাগে।

— নিকফিটস

এইচটিএমএল 5 সম্পর্কে সর্বশেষ লাইনটি না পড়া পর্যন্ত আমি কোনও প্রকল্পে এটি করার সম্ভাবনাটি খালি করতে যাচ্ছিলাম, এটি জানা ভাল, ধন্যবাদ।

— ইলাইন মার্লে

মোজিলা বিকাশকারী নেটওয়ার্ক ( ডেভেলপার.মোজিলা.আর.ইন- ইউএস / ডকস / ওয়েবে / এইচটিএমএল / এলিমেট / এ) এইচটিএমএল 5 </a> উপাদানগুলি এখন <div>, <ul> বা <টেবিল> ।

— এক্সেএফেক্ট

এইচটিএমএল 5 এর অধীনে কোনও উপাদানকে স্বচ্ছ হিসাবে শ্রেণীবদ্ধ করা হয় , যার অর্থ এটিতে কোনও উপাদানটির পিতামাতাকে প্রবাহ উপাদান থাকতে পারে কেবলমাত্র প্রবাহ উপাদানগুলি ( ডিফল্ট = ব্লক পড়ুন ) থাকতে পারে । অন্যথায়, কেবলমাত্র ফ্রেসিং উপাদানগুলি ( ডিফল্ট = ইনলাইন পড়ুন ) অনুমোদিত। সুতরাং, যদি ক একটি ফর্ম বা ডিভ হয় , এটি একটি ডিভ থাকতে পারে , কিন্তু একটি পি এর ভিতরে , এটি করতে পারে না। W3.org/TR/html-markup/terminology.html দেখুন

— পতঞ্জলি

Answer 2

না এটি বৈধ হবে না, তবে হ্যাঁ এটি সাধারণত আধুনিক ব্রাউজারগুলিতে কাজ করবে। বলা হচ্ছে, আপনার নোঙ্গরের অভ্যন্তরে একটি স্প্যান ব্যবহার করুন এবং display: blockএটিও সেট করুন, এটি অবশ্যই সর্বত্র কাজ করবে এবং এটি বৈধ হবে!

Comments

আপনি যদি সেট display: blockকরে থাকেন তবে এটি কি প্রযুক্তিগতভাবে একটি ব্লক উপাদান হয়ে উঠবে না?

— নটহাগো

@ হুগো প্রযুক্তিগতভাবে কিছু যায় আসে?

— অ্যান্ডি চেজ

ঠিক আছে, এইচটিএমএল 4.01 নির্দিষ্ট করে যে aউপাদানগুলিতে কেবল ইনলাইন উপাদান থাকতে পারে। আপনি যদি কোনও spanউপাদানকে একটি ব্লক উপাদান তৈরি করেন তবে এটি প্রযুক্তিগতভাবে কোনও অ্যাঙ্কারের ভিতরে থাকা উচিত নয়।

— নটহাগো

@ হুগো: এটি প্রদর্শিত হয় যে এইচটিএমএল 4 এ নিষেধাজ্ঞাগুলি শব্দার্থক, প্রেজেন্টেশনাল নয়। শব্দার্থকভাবে, একটি <div>ব্লক-স্তরীয় এবং একটি <span>ইনলাইন, যদিও নথির সাথে থাকা সিএসএস অন্যথায় আদেশ দেয়।

— রায় টিঙ্কার

যুক্ত শৈলী = "প্রদর্শন: ব্লক;" স্প্যান ট্যাগে এবং এটি একটি কবজির মতো কাজ করেছে। আমার কাঙ্ক্ষিত ফলাফল পেতে

— সবেমাত্র

Answer 3

W3C এর ডক ভালো ধারণা ব্যবহার করে না ভুল এবং পাপ , কিন্তু এটা মত যারা ব্যবহার করে উপায় প্রদান , উপযুক্ত হতে পারে এবং নিরুৎসাহিত ।

প্রকৃতপক্ষে, বিভাগ 4 এর দ্বিতীয় অনুচ্ছেদে , 4.01 স্পেস তার শব্দগুলিকে নীচে বর্ণিত করেছে

এই দস্তাবেজের মূল শব্দগুলি "আবশ্যক", "আবশ্যক নয়", "আবশ্যক", "শাল", "শট নয়", "উচিত", "উচিত নয়", "প্রস্তাবিত", "মাই" এবং "বিকল্প" [আরএফসি 2119] তে বর্ণিত হিসাবে ব্যাখ্যা করা। যাইহোক, পাঠযোগ্যতার জন্য, এই স্পেসিফিকেশনে এই শব্দগুলি সমস্ত বড় হাতের অক্ষরে উপস্থিত হয় না।

এই বিষয়টি মাথায় রেখেই আমি বিশ্বাস করি যে সুনির্দিষ্ট বক্তব্যটি 7.5.3 ব্লক-স্তর এবং ইনলাইন উপাদানগুলিতে , যেখানে এটি বলে

সাধারণত, ইনলাইন উপাদানগুলিতে কেবলমাত্র ডেটা এবং অন্যান্য ইনলাইন উপাদান থাকতে পারে।

"সাধারণভাবে" শর্তটি যথেষ্ট অস্পষ্টতার পরিচয় দেয় বলে মনে হয় যে এইচটিএমএল 4.01 ইনলাইন উপাদানগুলিকে ব্লক উপাদান থাকতে পারে।

অবশ্যই, CSS2 এর একটি ডিসপ্লে সম্পত্তি মান রয়েছে, ইনলাইন-ব্লক , এটি আপনার বর্ণিত উদ্দেশ্যে উপযুক্ত বলে মনে হচ্ছে। আমি এটি নিশ্চিত নই যে এটি কখনই ব্যাপকভাবে সমর্থিত হয়েছিল, তবে মনে হয় কেউ এই ধরণের আচরণের প্রয়োজনীয়তার পূর্বে প্রত্যাশা করেছিলেন।

এখানে ডিটিডি কম ক্ষমা করবে বলে মনে হয়, তবে ডিটিডি- র পাঠ্যটি অনুমানের চেয়ে পিছিয়ে যায়:

এইচটিএমএল 4.0.০১ স্পেসিফিকেশনটিতে অতিরিক্ত সিনট্যাকটিক সীমাবদ্ধতা রয়েছে যা ডিটিডি-র মধ্যে প্রকাশ করা যায় না।

অন্য একটি মন্তব্যে, আপনি পরামর্শ দিয়েছেন যে আপনি কোনও অ্যাঙ্কারে জড়িয়ে কোনও ব্লককে সক্রিয় করতে চান। আমি বিশ্বাস করি না যে এইচটিএমএল এটি নিষিদ্ধ করে, এবং সিএসএস স্পষ্টভাবে এটির অনুমতি দেয়। এটি কখনই সঠিক কিনা তা সম্পর্কে শিরোনাম প্রশ্নের উত্তর দিতে আমি হ্যাঁ বলি। মান দ্বারা, এটি কখনও কখনও সঠিক হয়।

Comments

আপনি ডক্টাইপ উল্লেখ না করা পর্যন্ত আমাকে রেখেছিলেন।

— রবার্ট হার্ভে

ডক্টাইপ নয়, ডক্টাইপ ডটকম

— ইয়ান টড

আপনি সম্ভবত সঠিক - আমার ডকটি টাইপ ডটকম ব্যবহার করা উচিত ছিল। ওপস - আমি পরের বারের জন্য মনে রাখার চেষ্টা করব। পিএইচপি -> এসও, এইচটিএমএল -> doctype.com

— টম

আমার গ্রহণযোগ্যতাটি হ'ল "ডক্টাইপ ডটকমের সাথে সম্পর্কিত হিসাবে বন্ধ করার ভোট" বিকল্প নেই (এমনটি হওয়া উচিত নয়)।

— রবার্ট হার্ভে

আমি রবের সাথে একমত - স্ট্যাক ওভারফ্লো প্রোগ্রামিংয়ের জন্য। এইচটিএমএল / সিএসএস অবশ্যই আমার দৃষ্টিতে প্রোগ্রামিং করছে।

— অসন্তুষ্ট গোয়াট

Answer 4

এইচটিএমএল 5 স্পেসিফিকেশন সহ ... এখন কোনও ইনলাইন উপাদানের ভিতরে ব্লক-স্তরের উপাদান স্থাপন করা সম্ভব। সুতরাং এখন একটি 'ডি' বা 'এইচ 1' একটি 'এ' উপাদানটির ভিতরে রাখা পুরোপুরি উপযুক্ত।

Comments

শুধু ভিতরে প্রবাহিত (ডিফল্ট = ব্লক ) উপাদান, বা স্বচ্ছ উপাদান (যেমন একটি ) বাবা তা সনাক্ত করতে মঞ্জুর সঙ্গে প্রবাহিত উপাদান। উদাহরণস্বরূপ, পি অনুমতি দেয় না প্রবাহ উপাদান (যেমন DIV আছে ), কিন্তু শুধুমাত্র phrasing উপাদানের (ডিফল্ট = ইনলাইন ,) তাই একটি একটি একটি ভিতরে পি একটি থাকতে পারে না DIV আছে । তবে, একটি একটি একটি ভিতরে DIV আছে ধারণ করতে পারে পি এস, DIV আছে গুলি বা অন্য কোন প্রবাহ উপাদান।

— পাতঞ্জলি

Answer 5

আপনি <div>ভিতরে রাখতে পারবেন না <a>- এটি বৈধ নয় (এক্স) এইচটিএমএল।

যদিও আপনি প্রদর্শন সহ একটি স্প্যান স্টাইল করেছেন: ব্লক করুন আপনি এখনও এর ভিতরে ব্লক-স্তরীয় উপাদানগুলি রাখতে পারবেন না: (এক্স) এইচটিএমএলকে এখনও (এক্স) এইচটিএমএল ডিটিডি (আপনি যে কোনও একটিই ব্যবহার করুন) মান্য করতে হবে, সিএসএস যাই হোক না কেন জিনিস পরিবর্তন।

ব্রাউজারটি সম্ভবত এটি আপনি প্রদর্শন হিসাবে প্রদর্শন করবে, কিন্তু এটি এটি সঠিক করে না।

Answer 6

এইচটিএমএল 4 এর জন্য একটি ডিটিডি রয়েছে http://www.w3.org/TR/REC-html40/sgML/dtd.html এ । এই ডিটিডিটি অনুমানের মেশিন-প্রসেসযোগ্য রূপ, একটি ডিটিডি এক্সএমএল এবং এইচটিএমএল 4 পরিচালনা করে এমন সীমাবদ্ধতার সাথে, বিশেষত "ক্ষণস্থায়ী" গন্ধ, এমন অনেকগুলি বিষয়কে অনুমতি দেয় যা "আইনী" এক্সএমএল নয়। তবুও, আমি বিবেচনা করি এটি নির্দিষ্টকারীর উদ্দেশ্যকে কোডিংয়ের কাছাকাছি আসে।

<!ELEMENT A - - (%inline;)* -(A)       -- anchor -->

<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">

<!ENTITY % fontstyle "TT | I | B | BIG | SMALL">

<!ENTITY % phrase "EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM" >

<!ENTITY % special "A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO">

<!ENTITY % formctrl "INPUT | SELECT | TEXTAREA | LABEL | BUTTON">

আমি এই শ্রেণিবদ্ধ তালিকাভুক্ত ট্যাগগুলি অনুমোদিত মোট ট্যাগ হিসাবে ব্যাখ্যা করব।

যদিও অনুমানটি "ইনলাইন উপাদানগুলি" বলতে পারে, আমি দৃ sure়ভাবে নিশ্চিত যে এটির উদ্দেশ্য নয় যে আপনি কোনও ব্লক উপাদানের প্রদর্শন প্রকারটি ইনলাইন হিসাবে ঘোষণা করে অভিপ্রায়টি পেতে পারেন । ইনলাইন ট্যাগগুলিতে আপনি কীভাবে আপত্তিজনক ব্যবহার করতে পারেন তা বিবেচনা না করে বিভিন্ন শব্দার্থবিজ্ঞান রয়েছে।

অন্যদিকে, আমি এটি আকর্ষণীয় specialমনে করি যে অন্তর্ভুক্তিটি নীড়ের Aউপাদানগুলিকে অনুমতি দেয় বলে মনে হয় । অনুমানের মধ্যে সম্ভবত কিছু শক্ত শব্দ রয়েছে যা এটি এক্সএমএল-সিন্ট্যাক্টিকালি সঠিকভাবে হলেও এটিটিকে অস্বীকার করে তবে আমি এটি আর অনুসরণ করব না কারণ এটি প্রশ্নের বিষয় নয়।

Comments

- - মানে কি জানেন ? আমি একটি ব্যাখ্যা সন্ধান করার চেষ্টা করেছি কিন্তু আমি একটি খুঁজে পাইনি।

— ইভান টড

Answer 7

ব্লক স্তরের উপাদানগুলি এইচটিএমএল 5 এ ট্যাগ <div>দ্বারা মোড়ানো হতে পারে <a>। যদিও একটি <div>একটি বলে মনে করা হয় প্রবাহ বিষয়বস্তুর জন্য ধারক / মোড়কের এবং <a>এর বিবেচনা করা হয় প্রবাহ বিষয়বস্তু অনুযায়ী MDN । শব্দার্থকভাবে ব্লক স্তর উপাদান হিসাবে কাজ করে এমন ইনলাইন উপাদান তৈরি করা ভাল।

Comments

হিসাবে একটি উপাদান স্বচ্ছ , অভিভাবক উপাদান শুধুমাত্র যদি একটি পারবেন প্রবাহ (ডিফল্ট ব্লক উপাদান)।

— পাতঞ্জলি

Answer 8

আপনি যদি অ্যাঙ্কর ট্যাগগুলির মধ্যে ডিভগুলি রাখার অর্থগত সমস্যা এড়াতে চান, তবে অ্যাঙ্কর ট্যাগটি ডিভের মতো একই স্তরে রাখুন, সমস্তটি অবস্থানের সাথে একটি ধারক দিয়ে মোড়ক করুন: আপেক্ষিক, আপনার অ্যাঙ্কর ট্যাগের অবস্থানটি করুন: পরম এবং এটিতে প্রসারিত করুন পাত্রে পূরণ করুন এছাড়াও এটি যদি সামগ্রীর প্রবাহের শেষ না হয় তবে নিশ্চিত হয়ে নিন যে আপনি এটিতে সামগ্রীর উপরে রাখার জন্য সেখানে একটি জেড-সূচক ফেলেছেন।

প্রস্তাবিত হিসাবে আমি একটি মার্কআপ কোড যুক্ত করেছি:

<div class="div__container>
  <div class="div__one>
  </div>
  <div class="div__two">
  </div>
  <a href="#"></a>
</div>

এবং সিএসএস:

.div__container {
  position: relative; 
}
.div__container a {
  position: absolute;
  top: 0;
  bottom: 0;      
  left: 0;
  right: 0;
  z-index: 999;
}

Comments

যদিও আপনার উত্তরটি সঠিক হতে পারে, আপনি যদি এটি মার্কআপ দিয়ে চিত্রিত করেন তবে এটি সহায়তা করবে।

— ডাটাশমন

Answer 9

আপনি যদি <a>ব্লক তৈরির প্রয়াসে যাচ্ছেন , <a>তবে ডিভের ভিতরে রাখবেন না কেন , একটি ব্লক উপাদান হওয়ায় এটি আপনাকে একই প্রভাব দেবে।

Comments

কারণ আমি অ্যাঙ্করটি একাধিক ডিভগুলি আবদ্ধ করতে চাই।

— টম

Answer 10

আপনি যদি এটি একটি ব্লক-শৈলীর উপাদানতে পরিবর্তন করেন, তবে না, এটি আর 'ভুল' নয়, তবে এটি সম্ভবত বৈধ হবে না। তবে আপনি যা করছেন তা করার পক্ষে কোনও তাত্পর্য নেই। আপনার হয় কেবল কোনও অভ্যন্তর ডিভ ছাড়াই ব্লক স্তর উপাদান হিসাবে অ্যাঙ্কর ট্যাগ রাখা উচিত, বা বাইরের দিকে ডিভটি রাখা উচিত।

Answer 11

এটা ভুল. একটি স্প্যান ব্যবহার করুন ।

Comments

rofl একটি ডিভ ব্যবহার হিসাবে একই জিনিস thats। আমি মনে করি আমি এটি ব্লিপ.টিভিতে (ডিভগুলি দিয়ে) দেখেছি তবে অন্যরা যেমন ব্লক = ব্লক অনুসারে এর ভুল উল্লেখ করেছে = ডিভ বা স্প্যান বা যাই হোক না কেন কিছু একই!

— জেমস মিচ

Answer 12

আমি মনে করি যে বেশিরভাগ সময় লোকেরা এই প্রশ্নটি জিজ্ঞাসা করে, তারা কেবল একটি ডিভ দিয়ে একটি সাইট তৈরি করেছে, এবং এখন ডিভের একটিতে একটি লিঙ্ক হওয়া দরকার।

আমি দেখেছি যে কেউ একটি ডিভের ভিতরে একটি লিঙ্ক তৈরি করার জন্য একটি অ্যাঙ্কর ট্যাগের ভিতরে একটি স্বচ্ছ খালি চিত্র, পিএনজি ব্যবহার করছে এবং ছবিটি ডিভের মতো একই আকারের।

খুব দু: খিত আসলে ... তবে এটি কাজ করে ...

Answer 13

আপনি সিউডো-উপাদানটির আগে "::" যোগ করে এটি অর্জন করতে পারেন

খাঁটি সিএসএস ট্রিক;)

a:before{
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0,0,0,0);
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/250" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</div>

Answer 14

ঠিক একটি এফওয়াইআই হিসাবে।

যদি আপনার লক্ষ্যটি আপনার ডিভকে ক্লিকযোগ্য করে তোলা হয় আপনি jQuery / জাভা স্ক্রিপ্ট ব্যবহার করতে পারেন।

আপনার ডিভ এর মতো সংজ্ঞা দিন:

<div class="clickableDiv" style="cursor:pointer">
  This is my div. Try clicking it!
</div>

আপনার jQuery এর পরে প্রয়োগ করা হবে:

 <script type="text/javascript">

    $(document).ready(function () {

        $("div.clickableDiv").click(function () {
            alert("Peekaboo"); 
        });
    });
</script>

এই থ্রেডে টমের মন্তব্য অনুসারে - এটি একাধিক ডিভগুলির জন্যও কাজ করবে

Comments

এটি ভয়াবহ, এটি কীবোর্ডের সাহায্যে ব্যবহার করা যাবে না, আপনি হোভার লিঙ্কটি দেখতে পারবেন না। এটি প্রায় লিঙ্ক-এর মতো কাজ করে, তবে আসল লিঙ্ক নয়। আপনি এটির মধ্যবর্তী ক্লিক করতে পারবেন না, অথবা এটির কোনও লিঙ্ক হিসাবে ডান ক্লিক করুন।

— নটহাগো

এটি অবশ্যই এর ব্যবহার আছে। আপনি ডিভের ভিতরে একটি অ্যাঙ্কর লাগাতে পারেন এবং ডিভ-ক্লিকটি শিশু অ্যাঙ্কারের অবস্থানে পুনর্নির্দেশ করতে পারেন। ডিআইভিএটিতে কার্সারটিকে পয়েন্টারে সেট করে আপনি অ্যাঙ্করটির চেহারা এবং অনুভূতি পাবেন, সাথে সাথে জাভাস্ক্রিপ্টের অনুমতি না থাকলে বা অ্যাক্সেসযোগ্যতার কারণে ডিভের ভিতরে কেবল অ্যাঙ্কর সহ একটি বৈধ ফ্যালব্যাক সমাধান রয়েছে। আপনি শব্দার্থবিজ্ঞান এবং সিনট্যাক্টিকালি সঠিকভাবে এইচটিএমএল পেয়ে যান এবং আপনাকে প্রদর্শন শৈলীর প্রশ্নবিদ্ধ পরিবর্তনগুলি নিয়ে গলগল করতে হবে না।

— পেডারি

আপনার যদি একটি ডিভ থাকে যাতে একটি লিঙ্ক থাকে আপনার কাছে ক্লিক হ্যান্ডলারটি ইভেন্টটি ধরতে পারে, অ্যাঙ্করটি সন্ধান করুন (নিশ্চিত করুন যে কেবলমাত্র সেখানে আছে) এবং তারপরে এটি ব্যবহার করুন। সাধারণ অ্যাঙ্কর ট্যাগের মাধ্যমে অ্যাক্সেসযোগ্য। এটি চিত্র এবং ক্যাপশন সহ চিত্রের বালতি রাখার অনুমতি দেয় এবং "আরও পড়ুন" লিঙ্ক - উদাহরণস্বরূপ। থটস?

— জুলিক্স